ES6如何利用import引入fs模块

2021-04-25 14:02发布

3条回答
樱田妮妮NiNi
2楼 · 2021-04-26 10:00

util_for_node.js


function log(o) {

    console.log(o);

}

 

module.exports = log;

es6_const_let_node_demo.js


// 在 Node 中使用模块的正确姿势:

const log = require("./lib/util_for_node");

// ES5

var a = 1;

a = a + 1;

log(a); // 2

 

// ES6

const b = 1;

// b = b + 1; // error : TypeError: Assignment to constant variable.

log(b);

 

// ES6

let c = 1;

c = c + 1;

log(c);

运行测试:


$ node es6_const_let_node_demo.js 

2

1

2

 

方法2 使用万能变换器:babel

util_for_babel.js


function log(o) {

    console.log(o);

}

 

export {log}

es6_const_let_babel_demo.js


import {log} from "./lib/util_for_babel";

 

/**

 node: module.exports和require

 es6:export和import

 nodejs仍未支持import/export语法,需要安装必要的npm包–babel,使用babel将js文件编译成node.js支持的commonjs格式的代码。

 因为一些历史原因,虽然 Node.js 已经实现了 99% 的 ES6 新特性,不过截止 2018.8.10,How To Enable ES6 Imports in Node.JS 仍然是老大难问题

 借助 Babel

 1.下载必须的包

 npm install babel-register babel-preset-env --D

 命令行执行:

 babel-node es6_const_let_babel_demo.js

 *

 * @type {number}

 */

 

 

// ES5

var a = 1;

a = a + 1;

log(a); // 2

 

// ES6

const b = 1;

// b = b + 1; // error : TypeError: Assignment to constant variable.

log(b);

 

// ES6

let c = 1;

c = c + 1;

log(c);

 

 

上面的代码,直接 node 命令行运行是要报错的:


$ node es6_const_let_babel_demo.js

/Users/jack/WebstormProject/node-tutorials/hello-node/es6_const_let_babel_demo.js:1

(function (exports, require, module, __filename, __dirname) { import {log} from "./lib/util_for_babel";

                                                                     ^

 

SyntaxError: Unexpected token {

    at newScript (vm.js:79:7)

    at createScript (vm.js:251:10)

    at Object.runInThisContext (vm.js:303:10)

    at Module._compile (internal/modules/cjs/loader.js:656:28)

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)

    at Module.load (internal/modules/cjs/loader.js:598:32)

    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)

    at Function.Module._load (internal/modules/cjs/loader.js:529:3)

    at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)

    at startup (internal/bootstrap/node.js:285:19)

 

是的,这个时候,我们需要再加上一层 Babel 的映射逻辑。下面就是 Babel 出场了。


1.安装依赖


npm install babel-register babel-preset-env --D

package.json


{

  "name": "hell-node",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "babel-preset-env": "^1.7.0",

    "babel-register": "^6.26.0"

  }

}

 

2.写处理启动脚本


es6_const_let_babel_demo_start.js


require('babel-register') ({

    presets: [ 'env' ]

})

 

module.exports = require('./es6_const_let_babel_demo.js')

OK,多费了这么多事,终于可以跑了:


$ node es6_const_let_babel_demo_start.js

2

1

2

 

跑的时候,你会明显发现,真 TMD 慢了许多!!! 慢就慢在 Babel 这层处理映射逻辑上。


方法3 使用 Node 中的实验特性:node --experimental-modules

你看,为了特意区分这是module JavaScript,文件后缀名必须改成 .mjs


util_for_node_exp.mjs


/**

 * 注意到这里的源码文件的后缀 .mjs

 * @param o

 */

 

function log(o) {

    console.log(o);

}

 

export {log};

es6_const_let_node_exp_demo.mjs


import {log} from "./lib/util_for_node_exp";

 

// ES5

var a = 1;

a = a + 1;

log(a); // 2

 

// ES6

const b = 1;

// b = b + 1; // error : TypeError: Assignment to constant variable.

log(b);

 

// ES6

let c = 1;

c = c + 1;

log(c);

 

/**

 * 源码后缀 .mjs

 */

 

命令行执行:


 $ node  --experimental-modules es6_const_let_node_exp_demo.mjs

输出:


 (node:1402) ExperimentalWarning: The ESM module loader is experimental.

 2

 1

 2

OK,上面就是 Node.js 中使用 ES6 中的 import / export 方法。



浅浅77
3楼 · 2021-04-26 10:25

vue 写多了 就喜欢使用 import 的方式 引入 模块 进行使用 但是把 nodeJs 是 CommonJS 的模块规范


正常使用的话 是


const fs = require('fs');


console.log( fs );


然后使用 node 运行一下


然后这下 我们直接更换成 es6的模块引入方式试试看哈


import fs from 'fs'


console.log( fs );



意料之中报错了 但是 我们怎么使用呢 其实 可以 通过babel 转换一下 就可以了


npm init -y    // 创建一个package.json文件 进行包管理

1

在package.json文件中

“type”:“module” // 加入这句话 要求node的 高版本哈


然后 我们在运行一下试试看


还有一种方式是 通过 babel 进行转换

同样也是 需要 npm init -y 创建一个 package.json 文件


然后

安装两个 东西

npm i babel-cli -g // 全部安装babel的命令提示符

npm i babel-preset-es2015 -D // 本地安装 es6的语法转换


然后再项目文件夹下 创建一个 .babelrc 的文件夹


.babelrc


{

    "presets": [

        "es2015"

    ],

    "plugins": []

}


然后启动一个文件夹是

babel-node index.js 看是不是又能执行是吧 哈哈


zgzbs
4楼 · 2021-11-29 10:36

这个和 ES6 没有关系,是模块系统的约定以及实现。在 node 文档里面详细描述了处理过程。
在 Node.js 模块系统中,如果 require 的模块不是核心模块,而且没有 './' 之类的开头,那就需要从当前 package 的 node_modules 里面找,找不到就到当前 package 目录上层 node_modules 里面取... 一直找到全局 node_modules 目录。

相关问题推荐

  • 回答 120

    相对前几年来说,要高上不少了,毕竟入行的人也是越来越多了,基础的工作对应想要参与的人群基数越来越大,但是对于高端人才的需求还是很多,人才还是相对稀缺性的。所以,想要学web或者其他技术也一样,别等,别观望。web前端就业方向特别多包括web前端开发...

  • 回答 25

    相对定位和绝对定位是定位的两种表现形式,区别如下:一、主体不同1、相对定位:是设置为相对定位的元素框会偏移某个距离。2、绝对定位:absolute 脱离文档流,通过 top,bottom,left,right 定位。二、特点不同1、相对定位:在使用相对定位时,无论是否进行移...

  • 抓包是什么意思?2020-04-01 17:36
    回答 7
    已采纳

    抓包(packet capture)就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作,也用来检查网络安全。抓包也经常被用来进行数据截取等。抓包可以通过抓包工具来查看网络数据包内容。通过对抓获的数据包进行分析,可以得到有用的信息。目前流行的...

  • 回答 89

    常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架、Foundation框架等等

  • 回答 65
    已采纳

    前端是目的就业前景非常不错的一个计算机技术,但是自学的话还是有一定难度的,网络上自学是碎片化的,同时互联网技术跟新换代快,自己的话比较吃力也学习不到最新的技术。

  • SSR 是什么意思?2020-03-20 18:56
    回答 6

    SSR就是一台服务器,可以利用 SSR 在远程的服务器上配置 SSR,使其能够成为 SSR 节点,这样本地电脑或者其它设备利用 SSR 节点实现 VPN 或者远程上网及游戏加速等方面。ShadowsocksR(简称 SSR)是 Shadowsocks 分支,在 Shadowsocks 的基础上增加了一些数据...

  • 回答 52
    已采纳

    计算机培训方向比较多,建议找适合自己的方向选择培训编程类:JAVA、WEB、Python、C/C++、C#等测试类:软件测试运维类:云计算、网络安全设计类:UI设计、3D建模等

  • 回答 11

    1、代码判断xAxis: {type: 'time',splitLine: {show: false},interval: 3600, // 设置x轴时间间隔axisLabel: {formatter: function(value, index) {return liangTools.unix2hm(value)}}},首先要把xAxis 显示类型设置成time,然后设置对应X轴......

  • 回答 8

    HTML5 + CSS + JavaScript 开发 跨平台重用代码 

  • 回答 4

    采用rem单位自动响应,并提供独有栅格化系统快速定义宽高、边距节省css代码量,同时总结各大型移动端网页,提供一套ui颜色搭配规范,尺寸规范,字体规范等。

  • 回答 10

    iView UI、ioni、SUI

  • 回答 6

     jQTouch 

  • 回答 4

    如果只是普通的移动端用vue react 或者dva 如果是要编译成小程序什么的或者混生 就用uni-app(对应vue语法)taro(对应react) 或者纯原生 这个没有限制的,自己怎么舒服怎么来

  • 回答 4

    因为可以运用在网页和小程序的开饭中,而且开源,用着便宜,企业都很喜欢

  • 回答 10

    一、Visual Studio Code下载地址:https://code.visualstudio.com/微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。Visual Stud...

  • 回答 9

    jQuery自带淡入淡出效果 https://www.w3school.com.cn/jquery/jquery_fade.asp 看看这个 

没有解决我的问题,去提问