經過 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 運行。

參考資料

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