babel import语法 js_通过 babel-node 运行 ES6 import/export 语法

由于自己经常在本地写一些 js 脚本进行文件处理等工作，常常会使用 import 语法引入模块。但是 Node 在默认情况下是不支持 import 和 export 的。

例如下面的文件

import fs from 'fs';

// do sth...

复制代码

运行脚本后，会发现 import 语法报错

$node test.js

(function (exports, require, module, __filename, __dirname) { import fs from 'fs';

^^

SyntaxError: Unexpected identifier

at new Script (vm.js:79:7)

at createScript (vm.js:251:10)

...

复制代码

这里我提供一个自己在本地调试 js 代码时常使用的方式：使用 babel-node 命令，来运行含有 import/export 语法的 js 代码。

注意：babel-node 不能用于生产环境！因为 babel-node 会加载更多资源和模块，使得运行环境变「重」。

1. 安装 babel-node

babel-node 命令并非独立安装，在该死的 Babel 7.x 以前，需要通过安装 babel-cli 包获得。而在更该死的 Babel 7.x 以后，babel 的模块被被拆分。因此需要安装 @babel/core @babel/node 两个包来获取。

如果你希望 babel-node 命令在全局可用，使用 -g 参数会让你一劳永逸。

babel 7.x 以前的写法

$npm i -g babel-cli

复制代码

babel 7.x 以后的写法

$npm i -g @babel/core @babel/node

复制代码

2. 安装 presets 并配置 .babelrc 文件

仅单安装 babel-node 也没用，运行 js 文件后你会发现依然报错。这是因为 babel-node 对 import 语法默认也是关闭的，因此需要安装指定的 preset 并配置 .babelrc 文件来开启语法支持。

截止2019年1月，原有的 babel-preset-es2015 写法已经废弃，与之代替的是 babel-preset-env 或者 @babel/preset-env，目前以后者为推荐。(鬼知道 babel 还会不会再变...)

由于两个 preset 模块对应的属性不同，因此分介绍：

第一种 babel-preset-env 写法

$npm i babel-preset-env --save-dev

复制代码

.babelrc 文件配置

{

"preset": [ "env" ]

}

复制代码

第二种 @babel/preset-env 写法

$npm i @babel/preset-env --save-dev

复制代码

.babelrc 文件配置

{

"presets": [ "@babel/preset-env" ]

}

复制代码

3. 执行 babel-node

至此经过上述配置，再通过 babel-node 即可执行含有 import/export 等 es6 语法的 js 文件。

$babel-node test.js

复制代码

最后切记由于性能问题，babel-node 仅限于在本地调试时使用，上线生产环境的代码还是需要使用 babel 进行转换，再使用 node 运行。

参考资料