babel速覽

babel

babel初衷

在es6出現以後，因爲此版本的巨大改變，給人們帶來了不少革命性的技術支持，可是當時不少瀏覽器對es6支持有限，babel就是爲了達到寫最新的語法，能夠在任意瀏覽器運行而出現的。

實現原理簡介

babel本質就是輸入新代碼輸出舊代碼，它屬於編譯原理的應用具體過程以下：

code -> AST  解析

modifyAST  修改

AST  -> code 生成

原理因爲是暫時入門，知道思想便可，之後再實踐操做

語法編譯

咱們知道了其實babel是一個編譯器，全部動做都會修改AST達到咱們的目的，那麼支持新語法，也是這個原理，如何提供修改的接口呢，babel引入了插件的概念，插件能夠操做AST，這樣就解決了擴展問題

因此，新語法都是有對應的插件的

這個時候我腦子想起來es6語法那麼多，總不可能一個一個配置吧，放心，babel官方也想到了這個問題，開啓了一系列的探索

.babelrc是babel的配置文件，語法須要配置presets選項

1.單個引入插件

優勢：無

缺點：

• 配置繁瑣

使用方法

// 安裝
npm install --save-dev @babel/plugin-transform-arrow-functions

// 配置

{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

2.stage-x

這是根據ES目前提案的進展來安裝一系列插件的

Stage 0 - 稻草人: 只是一個想法，通過 TC39 成員提出便可。

Stage 1 - 提案: 初步嘗試。

Stage 2 - 初稿: 完成初步規範。

Stage 3 - 候選: 完成規範和瀏覽器初步實現。

Stage 4 - 完成: 將被添加到下一年度發佈

低級的會包裹高級的

優勢：

配置方便

缺點：

因爲使用了非規範肯定的語法，一旦語法提案發生重大改變，代碼會受到重大影響

使用方法

npm install --save-dev @babel/preset-stage-0

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

3.es201x

這個是每一年更新一次，包括了標準規範的語法

優勢：

配置少，風險少

缺點：

配置不夠靈活，每一年須要更換

使用

npm install --save-dev babel-preset-es2015

{
  "presets": ["es2015"]
}

4.env

優勢：

1.配置簡單

2.無語法破壞風險

3.持續更新

4.更強大、靈活的配置方法

使用方法

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

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

API編譯

env核心配置講解

useBuiltIns

此選項要在代碼入口頂層引入"@babel/polyfill

useBuiltIns: 'entry'

優勢

不像默認導入，須要把整個polyfill導入，而是能夠按照瀏覽器列表支持，選擇性的加載

缺點

體積仍是相對較大

npm install @babel/polyfill --save

import "@babel/polyfill";

此時能夠根據browserslist配置根據運行環境編譯語法

不配置browserslist的webpack打包大小

useBuiltIns: 'usage'

優勢：

只有用到的才polyfill,能夠說是完美了

缺點

不會探測引用node_modules代碼，這部分不會提供polyfill，若是第三方包沒有編譯成兼容版本，就可能報錯

npm install @babel/polyfill --save

import "@babel/polyfill";

此時會根據項目中引用到語法按需polyfill，體積較小

babel用法

原型開發

適合實時查看babel一些轉譯方案

https://babeljs.io/repl

瀏覽器純編譯

<div id="output"></div>
<!-- Load Babel -->
<!-- v6 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>

node純編譯

require-hook

原理

攔截require行爲，在require時對文件進行實時編譯

用法

在應用入口

require("babel-register");

import "babel-register";

babel-cli

用法

npm install --save-dev @babel/core @babel/cli

增長npm腳本
"scripts": {
  "build": "babel src -d lib"
}

搭配webpack或者gulp構建工具

這部分查看官方文檔便可

gulp

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/app.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

webpack

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}