babel note

不使用框架或打包工具來執行 es6 編譯

• babel 是 es6 編譯工具。
• 運作機制
  • 安裝 babel 指令工具。
  • 安裝轉碼规则集。
  • 需配置 .babelrc 文件。
• 瀏覽器中的即時編譯 (較耗效能)
• babel 外掛
• 與其他工具配合

Babel 入门教程 (阮一峰 2016) http://www.ruanyifeng.com/blog/2016/01/babel.html

一、配置文件.babelrc

二、命令列工具 babel-cli

不建議全域安裝，建議使用「專案安裝」。 在 package.json 定義 script 指令。

三、babel-node 指令 (?)

REPL（Read-Eval-Print-Loop）效果類似瀏覽器 devtool console 指令

四、babel-register

使用 require 加载 .js、.jsx、.es 和 .es6 檔案，就会先用 Babel 进行转码。

• babel-register 只会对 require 命令加载的文件转码，而不会对当前文件转码。
• 為实时转码，所以只适合在开发环境使用。

五、babel-core (?)

以 es6 寫好的 api，要載入與 es5 檔案一起使用，就要先將該 api 轉為 es5。

六、babel-polyfill 转换 es6 API

Babel 默认只转换新的 JavaScript 句法（syntax），不转换新的 API， 比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（ 比如 Object.assign ）都不会转码。

举例来说，ES6 在 Array 对象上新增了Array.from 方法。Babel 就不会转码这个方法。

七、浏览器环境

將編譯工具以 <script> 放入 html 中在瀏覽器中即時轉譯

• cdn: babel-standalone
• npm i babel-core@old
  • babel-core@old 會將檔案載入專案，然後可用 script 引入

    將 es6 檔案打包成單一檔案並解析成 es5 在 html 匯入

    使用 Browserify。會根據 require() 找到檔案， 打包 (bundle) 成單一獨立的 javascript 檔案，以供網頁以 <script > 直接使用。

八、在线转换

REPL 在线编译器

九、与其他工具的配合

ESLint

用于静态检查代码的语法和风格，安装命令如下。