技術標籤：筆記babelnode.jses6npm前端

轉碼器

什麼是轉編譯

• 轉編譯器可以將一種程式語言的原始碼轉換成另一種程式語言的原始碼。

適用場合

• 將一個版本的JavaScript編譯成另一個版本的JavaScript

使用Babel轉編譯

命令列轉碼babel-cli

使用Babel需要配置Node.js包，便於安裝所需要的依賴包。

• 建立Node.js專案

  #建立目錄
  $ mkdir project_name  
  #切換目錄
  $ cd project_name   
  #初始化為一個新專案，-y表示使用預設配置
  $ npm init -y       
  

• 配置Babel

  • 安裝Babel的命令列介面 npm i babel-cli --global

    ,使用全域性安裝

  • 從es6開始，Babel不進行任何預設轉換，對於要應用的任何轉換，必須進行預置條件然後安裝對應外掛,使用es6舉例如下：

    • 預置條件在.babelrc檔案中,此檔案必須處於專案根目錄並且內容是有效的JSON格式

      {
          "presets": ["es2015"]
      }
      

    • 安裝對應外掛

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

• 轉編譯測試

  • 先在專案中建立一個src資料夾，然後在src下新增index.js檔案，此時目錄結構為：

  

  • 在index.js中新增 let a = 'hello'

  • 執行 babel src -d dist

    轉編譯原始碼，babel src表示babel對src的內容進行操作，預設情況下，轉編譯後的程式碼被輸出到終端，-d dist表示輸出到dist目錄下

  

• 避免重複執行 babel src -d dist操作

  • 以上的轉編譯測試是在全域性環境下進行的，但是為了避免專案對環境產生依賴，可以使用 npm i babel-cli --save-dev命令，此命令將babel-cli安裝在專案之中，可以支援不同專案使用不同版本的Babel

  • 配置NPM指令碼執行任務，在package.json檔案中找到特定的指令碼部分，通過名稱指定可執行的指令碼部分，如圖：

  

  • 執行 npm run babel

babel-node

• babel-cli工具自帶一個babel-node命令，提供一個支援ES6的REPL環境（Read-eval-print-loop 互動式解析器，可以定義和執行變數、函式、物件）。

• 進入REPPL環境

  #進入REPL環境執行程式碼
  $ babel-node
  > (x => x * 2)(1)
  2
  
  #直接執行ES6指令碼
  $ babel-node es6.js
  

  使用babel-node代替node的話，指令碼就不需要進行轉碼處理。

babel-register

babel-register模組改寫了require命令，為其加上了一個鉤子。每當使用require載入字尾為.js、.jsx、.es、.es6檔案時，就會先用Babel進行轉碼。

$ npm i babel-register --save-dev

require("babel-register");
require("./index.js")

它只會對require載入的檔案進行轉碼，不會轉碼當前檔案，由於是實時轉碼，只適用於開發環境。

babel-polyfill

Babel預設只轉換新的JavaScript句法，不轉換新的API。想要使用新的API，就要用babel-polyfill。

$ npm i babel-polyfill --save

在指令碼頭部加入以下程式碼：

import 'babel-polyfill'
//或者
require('babel-polyfill')

閱讀《ES6標準入門（第3版）》讀書筆記