通過 babel-node 執行 ES6 import/export 語法

redmed發表於2019-01-28
BabelImportExport

由於自己經常在本地寫一些 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 執行。

參考資料

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

相關文章