Closed xccjk closed 1 year ago
大家在编写node相关代码时,肯定遇到过下面的问题
// a.js import fs from 'fs' ... // bash node a.js
在你没有做过任何处理的情况下,肯定会出现一个挺傻的错误
看到这里,你肯定会想,大清都亡了,在node中还不能使用import等新语法嘛。
两者采用的模块化规范不一样,nodejs采用的是CommonJS的模块化规范,使用require引入模块;而import是ES6的模块化规范关键字
是谁说node不支持import等语法的,其实在node后面的版本中,已经出现了支持node import语法的提案,只是还没完全开始使用,那么,应该怎么使用呢?
// a.mjs import fs from 'fs' ... // bash node --experimental-modules a.mjs
当你这样运行代码时,恩,你会 发现居然没有抛出上面的错误,你是否发现了重点内容:文件扩展名要为mjs和node运行时需要加--experimental-modules参数
node官方对import支持文档
但是,改文件扩展名是不是有点怪怪的...而且当文件多的时候,我难道需要一个个的迁移改掉嘛,我只是想使用一下新语法就要搞得这么麻烦。那么,有没有什么可以不用改变原来的代码,新的也可以用。这个时候,你就需要用到babel
一听到babel,我就想到了使用webpack的痛苦感受。babel版本间api不一致,配置复杂是不可回首的往事。但是抵挡不住它香啊...
不逼逼了,我先说结果,在这里使用babel,就是为了把es6+的新语法转换为node可以识别的语法
在老版本中,我们一般采用babel-preset-es2015来做转换工作
// babel-preset-es2015配置方式 yarn add babel-preset-es2015 -D // .babelrc { "parsets": ["es2015"] }
后来,随着每年新的es语法的出现,有要对新的语法做适配。恩,后面就出现babel-preset-es2016、babel-preset-es2017、babel-preset-es2018...,是不是感觉没完没了了
强迫症的人都受不了这样的写法,所以后面,把这些包做成了一个集合babel-preset-env
// babel-preset-env配置方式 yarn add babel-preset-env -D // .babelrc { "parsets": ["env"] }
babel-preset-es2015与babel-parser-env的关系及升级指南
在我们进行语法转换时,需要使用babel-node命令来执行包含import/export语法的代码
再后来,随着babel版本的升级,babel对babel-node等相关包做了拆分
babel7.x以前
yarn add babel-cli babel-parser-env -D
babel7.x之后
yarn add @babel/cli @babel/core @babel/node @babel/preset-env @babel/plugin-transform-runtime -D // .babelrc { "presets": [ "@babel/preset-env" ], "plugins": [ [ "@babel/plugin-transform-runtime" ] ] }
安安心心使用require的模块导入方式,在开发npm包的时候还是好些。node服务之类的还是添加babel相关依赖会更好
要node支持import等新语法,看这里你就都明白了
现状
大家在编写node相关代码时,肯定遇到过下面的问题
在你没有做过任何处理的情况下,肯定会出现一个挺傻的错误
看到这里,你肯定会想,大清都亡了,在node中还不能使用import等新语法嘛。
两者采用的模块化规范不一样,nodejs采用的是CommonJS的模块化规范,使用require引入模块;而import是ES6的模块化规范关键字
解决方案
方法1
是谁说node不支持import等语法的,其实在node后面的版本中,已经出现了支持node import语法的提案,只是还没完全开始使用,那么,应该怎么使用呢?
当你这样运行代码时,恩,你会 发现居然没有抛出上面的错误,你是否发现了重点内容:文件扩展名要为mjs和node运行时需要加--experimental-modules参数
node官方对import支持文档
但是,改文件扩展名是不是有点怪怪的...而且当文件多的时候,我难道需要一个个的迁移改掉嘛,我只是想使用一下新语法就要搞得这么麻烦。那么,有没有什么可以不用改变原来的代码,新的也可以用。这个时候,你就需要用到babel
方法2
一听到babel,我就想到了使用webpack的痛苦感受。babel版本间api不一致,配置复杂是不可回首的往事。但是抵挡不住它香啊...
不逼逼了,我先说结果,在这里使用babel,就是为了把es6+的新语法转换为node可以识别的语法
在老版本中,我们一般采用babel-preset-es2015来做转换工作
后来,随着每年新的es语法的出现,有要对新的语法做适配。恩,后面就出现babel-preset-es2016、babel-preset-es2017、babel-preset-es2018...,是不是感觉没完没了了
强迫症的人都受不了这样的写法,所以后面,把这些包做成了一个集合babel-preset-env
babel-preset-es2015与babel-parser-env的关系及升级指南
在我们进行语法转换时,需要使用babel-node命令来执行包含import/export语法的代码
再后来,随着babel版本的升级,babel对babel-node等相关包做了拆分
babel7.x以前
babel7.x之后
方法3
安安心心使用require的模块导入方式,在开发npm包的时候还是好些。node服务之类的还是添加babel相关依赖会更好