ES6-babel轉碼

時間 2019-11-12

標籤 es6 babel 欄目 JavaScript 简体版

原文原文鏈接

關於BaBel轉碼

有人問我babel的功能以及執行的過程和配置，在網上查閱了大量的資料~收集到這些~有錯請指出，及時修改。html

--------------------------------------------------------------------------------------------------node

衆所周知，解決Nodejs異步問題的終極方案就是使用async/await方案，可是每次在項目中配置都會或多或少有些問題，每次都會被幾個組件git

babel-core
babel-polyfill
babel-preset-es2015
babel-preset-stage-0
babel-plugin-*

搞的有點混淆不清，甚至不知所措，咱們的項目環境利用expressjs搭建，不一樣程度的使用了es6甚至es7的語法特性和新的API，因此babel轉碼es6

咱們先看下具體的CASEgithub

CASE

nodejs 4.4.7

Case 1

去掉 app.js 裏邊的 // import 'babel-polyfill' 和 // import 'babel-core/register'， .babelrc裏邊須要有pluginsexpress

{
    "presets": [
        "es2015",
        "stage-0"
    ],
    "plugins": [
        ["transform-runtime", { "regenerator": true }]
    ]
}

帶有async的代碼正常能run起來。瀏覽器

Case 2

去掉 app.js 裏邊加上 import 'babel-polyfill'，babel裏邊正常babel

{
    "presets": [
        "es2015",
        "stage-0"
    ],
    "plugins": [
    ]
}

帶有async的代碼能正常runapp

import 'babel-polyfill 換成 import "babel-core/register"代碼沒法run起來，報錯異步

nodejs v7.4.0

Case 1

app.js 中引入import 'babel-polyfill'

而 .babelrc 以下

{
    "presets": [
        "es2015",
        "stage-0"
    ]
}

代碼能正常run起來。

去掉 import 'babel-polyfill' 或者替換爲 import "babel-core/register" 代碼均不能正常run

Case 2

app.js 中去掉 import 'babel-polyfill'，而 .babelrc 代碼加入

{
    "presets": [
        "es2015",
        "stage-0"
    ],
    "plugins": [
        ["transform-runtime", { "regenerator": true }]
    ]
}

代碼能夠正常run。

獲得結論

若是須要使用async和await，有兩種方式，

在程序的入口處第一行引入 import babel-polyfill.
或者使用babel轉碼的時候引入插件 ["transform-runtime", { "regenerator": true }]

往下探索

首先咱們要搞清楚async和await屬於es2016（es6其實是2015年發佈的，es6常被稱爲es2015，而es2016其實就是es7）的特性，Nodejs在實現標準版本的進程上相對瀏覽器側要快，截止到nodejs6.x的版本上，想要使用async和await還須要babel的轉碼才能實現。

仍是看Case

例如以下代碼

const fs = require('fs')

async function readFiles (fileName) {
  return new Promise(function(resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) reject(error)
      resolve(data)
    })
  })
}

const start = async function() {
  const result = await readFiles('/Users/liujb/Desktop/aa.txt')
  console.log(result.toString())
}

start()

親測在v7.4.0下報語法錯誤，在v7.7.4下能run。

關於babel

from

以上內容仍是很清晰的，經過babel轉碼會默認讀取babelrc設定的規則，同時會運用相應的插件。

關於插件

babel-register and babel-polyfill

仔細閱讀阮老師的博客

babel-register是一個鉤子，會對require的js、es、jsx、es6後綴的文件進行轉碼，且不會對當前文件進行轉碼，並且是實時轉碼因此只適合開發階段。

babel-polyfill對es6的API進行轉碼，bable只會對syntax進行轉碼。

babel-plugin-*

babel-plugin-* 表明了一系列的轉碼插件，如babel-plugin-transform-es2015-arrow-functions 用於轉碼 es6 中的箭頭函數，babel-plugin-transform-async-to-generator 用於將 es7 中的 async 轉成 generator。

babel-preset-*

咱們如今有了 babel-plugin 系列，能夠按需配置本身想要的特性。但如果想搭個 es6 環境，一個個地配置各個插件，我猜你會瘋掉。babel-preset 系列就能夠知足咱們的需求，babel-preset 系列打包了一組插件，相似於餐廳的套餐。如 babel-preset-es2015 打包了 es6 的特性，babel-preset-stage-0 打包處於 strawman 階段的語法