由于自己經(jīng)常在本地寫一些 js 腳本進(jìn)行文件處理等工作，常常會(huì)使用 import 語(yǔ)法引入模塊。但是 Node 在默認(rèn)情況下是不支持 import 和 export 的。

例如下面的文件

import fs from 'fs';
// do sth...

運(yùn)行腳本后，會(huì)發(fā)現(xiàn) import 語(yǔ)法報(bào)錯(cuò)

$ 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)
    ...

這里我提供一個(gè)自己在本地調(diào)試 js 代碼時(shí)常使用的方式：使用 babel-node 命令，來(lái)運(yùn)行含有 import/export 語(yǔ)法的 js 代碼。

注意：babel-node 不能用于生產(chǎn)環(huán)境！因?yàn)?babel-node 會(huì)加載更多資源和模塊，使得運(yùn)行環(huán)境變「重」。

1. 安裝 babel-node

babel-node 命令并非獨(dú)立安裝，在該死的 Babel 7.x 以前，需要通過(guò)安裝 babel-cli 包獲得。而在更該死的 Babel 7.x 以后，babel 的模塊被被拆分。因此需要安裝 @babel/core @babel/node 兩個(gè)包來(lái)獲取。

如果你希望 babel-node 命令在全局可用，使用 -g 參數(shù)會(huì)讓你一勞永逸。

babel 7.x 以前的寫法

$ npm i -g babel-cli

babel 7.x 以后的寫法

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

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

僅單安裝 babel-node 也沒(méi)用，運(yùn)行 js 文件后你會(huì)發(fā)現(xiàn)依然報(bào)錯(cuò)。這是因?yàn)?babel-node 對(duì) import 語(yǔ)法默認(rèn)也是關(guān)閉的，因此需要安裝指定的 preset 并配置 .babelrc 文件來(lái)開啟語(yǔ)法支持。

截止2019年1月，原有的 babel-preset-es2015 寫法已經(jīng)廢棄，與之代替的是 babel-preset-env 或者 @babel/preset-env，目前以后者為推薦。（鬼知道 babel 還會(huì)不會(huì)再變...）

由于兩個(gè) preset 模塊對(duì)應(yīng)的屬性不同，因此分介紹：

第一種 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. 執(zhí)行 babel-node

至此經(jīng)過(guò)上述配置，再通過(guò) babel-node 即可執(zhí)行含有 import/export 等 es6 語(yǔ)法的 js 文件。

$ babel-node test.js

最后切記由于性能問(wèn)題，babel-node 僅限于在本地調(diào)試時(shí)使用，上線生產(chǎn)環(huán)境的代碼還是需要使用 babel 進(jìn)行轉(zhuǎn)換，再使用 node 運(yùn)行。

參考資料

babel-node
babel-preset-es2015 -> babel-preset-env
@babel/preset-env