babel-node 初體驗

簡單玩一下。

什麼是 babel-node

簡單來說就是一個跟 node 很像的指令，用 babel-node 來執行時會先幫你「編譯」成舊的語法在執行，所以你可以用 babel-node 來跑一下 ES6 或新的語法。

但要提醒一下，這個只適合用在 development，如果用在 production 的話效能會不好。

更多詳細可以參考 官網

所以如果你只是想稍微玩一下新語法，但又覺得要先把檔案編譯成 bundle.js 太麻煩的話，可以用這個套件來玩一下。

該安裝的東西與設定

安裝以下這些套件：

npm install --save-dev @babel/core @babel/node
npm install --save-dev @babel/preset-env

簡單解釋一下 @babel/core 是 babel 的主要內容，大部分的 babel 套件都需要依賴它來執行。@babel/node 就是這次要使用的套件。

至於 @babel/preset-env 是用來對 babel 做 preset 設定的套件，用來跟 babel 說「請你幫我把 xxx 語法轉成 xxx 語法」，大概是這樣的意思。

最後要記得建立 .babelrc 檔案來告訴 babel 你要用 @babel/preset-env 這個套件：

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

簡單示範

假設我現在用 ES6 的 import 跟 export 的語法來寫模組：

// utils.js
export function add(a, b) {
  return a + b
}

// main.js
import { add }  from './utils.js'
console.log(add(1, 2))

如果我直接用 node main.js 的話：

user@LAPTOP-3A1RJ558 MINGW64 /d/test_folder
$ node main.js
(node:20824) Warning: To load an ES module, set "type": "module" in the package.json
or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
D:\test_folder\main.js:10
import { add } from './utils.js'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:984:16)
    at Module._compile (internal/modules/cjs/loader.js:1032:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:1
2)
    at internal/main/run_main_module.js:17:47

（現在 Node.js 有提供內建的方式來執行 import 與 export，所以錯誤訊息有跟你說該做什麼設定）

簡單來說就是不支援這個語法，所以沒辦法跑。

現在改用 npx babel-node main.js：

3  // 執行成功

這樣就可以安心寫 ES6 囉。