babel 用法及其 .babelrc 的配置詳解，想作前端架構，拒絕只知其一;不知其二...

時間 2019-11-08

標籤 babel 用法及其 babelrc 配置詳解前端架構拒絕只知其一不知其二欄目系統架構简体版

原文原文鏈接

Babel

官方介紹：將 ECMAScript 2015 及其版本之後的 javascript 代碼轉爲舊版本瀏覽器或者是環境中向後兼容版本的 javascript 代碼。javascript

簡而言之，就是把不兼容的 JavaScript 代碼轉爲可兼容，能夠執行的 JavaScript 代碼。html

　　功能：前端

　　　　語法轉換 java

　　　　添加一些兼容性的 polyfill 功能node

　　　　源碼轉換等react

　　簡單配置預覽：webpack

{
    "plugins": [],  // 插件配置
    "presets": []   // 預設配置
}

// 這裏 .babelrc 配置的


// 官網建議用 module 的形式來配置，bable.config.js

const presets = []
const plugins = []
module.exports =  { presets, plugins }

　　配置介紹：es6

　　　　presets ：是某一類 plugin 的集合，包含了某一類插件的全部功能。web

　　　　plugin ：將某一種須要轉化的代碼，轉爲瀏覽器能夠執行代碼。chrome

　　編譯的執行順序：

　　　　一、執行 plugins 中全部的插件

　　　　二、plugins 的插件，按照順序依賴編譯

　　　　三、全部 plugins 的插件執行完成，在執行 presets 預設。

　　　　四、presets 預設，按照倒序的順序執行。(從最後一個執行)

　　　　五、完成編譯。

　　一、主要插件介紹

　　　　babel-preset-es2015 ( ES2015 / ES6 插件集合 )

　　　　將 ES2015(es6) 的 javascript 代碼轉化瀏覽器兼容 javascript 代碼

　　　　arrow-functions　　：箭頭函數

　　　　block-scoped-functions　　：函數命名的方式轉話，改成賦值的形式

　　　　block-scoping　　：let 轉爲 var

　　　　classes　　： es6 的類轉化

　　　　computed-properties　　：屬性命名的轉化，如：var obj = { ['x'+a]: 1 }

　　　　destructuring　　：析構函數轉化

　　　　duplicate-keys　　：屬性優化

　　　　for-of　　：for of 的轉化

　　　　function-name　　：優化函數命名

　　　　instanceof　　：instanceof 轉化

　　　　literals　　：不一樣類型複製優化

　　　　new-target　　：繼承 extends 轉化

　　　　object-super　　：super 轉化

　　　　parameters　　：params ，(a=1,b=2)=>{} , 默認參數轉化

　　　　shorthand-properties　　：對象屬性轉化 {a,b} => {a:a,b:b}

　　　　spread　　：擴展屬性轉化 {...other}

　　　　sticky-regex　　：regex 優化，用 new Regex構建

　　　　template-literals　　：字符串模版

　　　　typeof-symbol　　：symbol 轉化

　　　　unicode-regex　　：將正則的匹配字符串轉爲 unicode

　　　　babel-preset-es2016 （ ES2016 / ES7 插件集合）

　　　　將 ES2016(es7) 的 javascript 代碼轉爲瀏覽器兼容代碼

　　　　exponentiation-operator　　：冪運算轉化 x **= 3 ，x的3次冪

　　　　babel-preset-es2017（ ES2017 / es8 插件集合）

　　　　將 ES2017(es8) 的代碼進行轉化　　　　

　　　　async-to-generator　　：轉化 async/await 轉爲 generator 函數

　　　　babel-preset-stage-x （ ES2018/stage 插件集合）

　　　　將 stage 階段的代碼轉化

　　　　async-generator-function　　：將異步函數進行轉化

　　　　dotall-regex　　：點號正則優化

　　　　object-rest-spread　　：解析構優化

　　　　optional-catch-binding　　：catch 加 finally 優化

　　　　unicode-proprty-regex　　

　　　　Modules

　　　　modules-amd / modules-commonjs / modules-systemjs / modules-umd

　　　　將不一樣的 export default x 轉爲不一樣的模塊形式 amd / commonjs / systemjs / umd

　　　　Experiental （試驗階段）

　　　　class-properties　　：class 的靜態屬性轉化

　　　　decorators　　　　：裝飾器轉化

　　　　do-expressions　　

　　　　export-default-from　　：export 優化

　　　　export-namespace-from　　：export 優化

　　　　function-bind　　：bind 函數轉化，obj::fun => fun.bind(obj) ::obj.fun => obj.fun(obj)

　　　　function-sent　　

　　　　logical-assignment-operators　　　

　　　　nullish-coalescing-operaor

　　　　numeric-separator

　　　　optional-chaining

　　　　pipeline-opertor

　　　　throw-expressions　　　　

　　　 Minification（ babel-minify ）

　　　　運用代碼壓縮優化插件預設

　　　　...

　　　　這裏自行能夠去官網上查看...

　　　　babel-preset-react ( react 集合 )

　　　　react 的相關編譯轉化...

　　　　jsx 和 element 的一下轉化

　　　　直接添加 react 的預設就能夠了。

　　　　Other 其餘一些插件

　　　　jscript　　：嚴格模式命名

　　　　object-assgin　　：assgin 轉化

　　　　regenerator　　：generator 函數的轉化

　　　　object-set-prototype-of-to-assign　　：setPrototype 轉化

　　　　runtime　

　　二、主要 presets 介紹

　　　　@babel/preset-dev

　　　　是一個智能預設。

　　　　根據瀏覽器和運行環境，自動的肯定 babel 插件和 polyfills 。

　　　　沒有任何配置的狀況下，和 babel-preset-latest 同樣 ( es2015/es2016/es2017一塊兒使用 )。

{
  "presets": [ "dev" ]  
}

　　配置及其詳解：

{
　　"presets": [
　　　　[
　　　　　　'@babel/preset-env',
　　　　　　{
　　　　　　　　'target':{
　　　　　　　　　　"browser":["ie>=8","chrome>=62"],
　　　　　　　　　　"node":"8.9.0",
　　　　　　　　　　"safari":"tp"
　　　　　　　　},
　　　　　　　　"modules":false,
　　　　　　　　"debug":true,
　　　　　　　　"uglify":true
　　　　　　　　"useBuiltIns":true
　　　　　　}
　　　　]
　　]
}

　　target : 描述您爲項目配置的支持/定位的環境

　　　　browsers ：瀏覽器的支持狀況，將返回支持瀏覽器列表。會被 target.ie 覆蓋

　　　　　　[ 'ie>=8' ] 支持 ie8 的環境

　　　　　　"default" 默認

　　　　node ：指定是 node 環境，且能夠指定版本

　　　　safari : safari 版本

　　modules : 啓用將 es6 轉爲其餘模塊

　　debug ：是否啓用 console.log　

　　include / exclude : 必須啓用的 plugin 功能 / 不啓用的 plugin 功能

　　uglify : 壓縮代碼

　　useBuiltIns ：

　　　　false ：引用全部的 babel-polyfill ，在 webpack 中添加 babel-polyfill 入口處：

　　　　　　　 entry:[ 'babel-polyfill' , 'index.js' ] , 引用全部的 polyfill，體積變大

　　　　true ：引用部分，根據配置的 preset-env 環境，引用 polyfill ，

　　　　　　　在入口文件中要引用 babel-polyfill

　　@babel/preset-react

　　這都是一些 react 相關的集合

　　不須要介紹了，有須要本身去官網瀏覽下.

　　Stage-x

　　草案中的預設..

　　該插件集合不存在 preset-env 集合中，因此須要引用....

　　三、babel-polyfill 兼容方法

　　babel的 preset-dev 中只會轉化新的 Javascript 語法，不會轉化新的 api。

　　例如：Generator / Set / Map 等

　　就是實現 babel 轉化後的代碼中，仍有不兼容的代碼的轉化。

　　原理：

　　babel-folyfill 是修改全局的對象的原型，添加不兼容的 api 方法，或者修改不兼容的 api 方法。

　　用法：

　　一、在入口文件的頂部添加：

require('@babel-polyfill');

import '@babel-polyfill'

　　二、webpack 中添加

{
　　entry:['@babel-polyfill','./app.js']
}

　　在 webpack 的配置文件中添加。

　　三、直接在 html 中引用，在打包 js 的文件以前

<script src = './babel-polyfill.js' ></script>

　　四、transform-runtime 插件

　　對 babel 轉化後的代碼，進行再次轉化，與 babel-polyfill 同樣，解決不兼容的全局 api 。

　　與 babel-polyfill 不一樣是它不是添加/修改全局對象。

　　它是對不兼容的方法進行特殊處理，也就是添加輔助方法來作兼容。

　　而且 transform-runtime 是在須要進行兼容轉化時候引用。

　　transform-runtime 是依賴 babel-runtime ，且輔助方法都是引用的 babel-runtime

　　特色：

　　不會污染全局變量，由於不會修改全局對象

　　沒有修改實例的方法，因此有些方法不能實現。

 ["transform-runtime", {
　　　　"corejs":false,
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "babel-runtime"
 }]

　　helpers ：是否使用 @babel-runtime/helpers 來代替內部的 helpers

　　coresjs ：是否用 @babel-runtime/corejs 中的輔助方法來替換 Map / Set 等方法

　　polyfill : 是否用 @babel-runtime 的輔助函數來代替 polyfill

　　regenerator ：是否用輔助函數來代替 async / generator 函數

　　moduleName ：引用時候名字

　　五、@babel-register

　　經過 @babel-register 來註冊當前全部的代碼須要轉碼

var fs = require('fs');
var babelConfig = JSON.parse(fs.readFileSync('./.babelrc'));
require('babel-register')(babelConfig);

　　很顯然，這裏能夠傳入一個 .babelrc 配置文件來進行轉碼時候的配置。

　　只須要添加到入口文件中。

　　node 端就能夠這這樣實現 babel 的轉碼。

　　六、tools

　　babel-parser : babel 的解析器，用於解析 Javascript / jsx / Typescript / flow 等代碼

　　babel-core ： babel 的核心文件，用於轉碼的

　　babel-generator ：代碼的轉化，源碼和轉化代碼

　　babel-code-frame : 代碼轉化位置等轉碼映射

　　babel-helpers ：輔助器方法

　　babel-runtime ：提供了一些列的輔助方法，與 polyfill 相似

　　...

@bable/babel-cli 命令行工具

　　用於命令行編譯文件，能夠進行配置以及輸出等操做。

　　用法：

babel  input.js -options
// 編譯 input.js  文件

　　配置：

　　-o ：輸出路徑

　　-w ：監聽編譯文件，實時編譯

　　-s ：輸出source-map ，能夠內斂

　　-d ：當編譯一個目錄時候，-d 輸出目錄

　　--ignore ：忽略的文件

　　--plugins ：使用插件，用 , 隔開

　　--presets ：使用預設，用 , 隔開

　　--config-file ：使用 .babelrc 文件路徑

.babelrc 配置詳解

　　配置轉化起 babel 三種不一樣做用：

　　　　一、用於語法轉義的配置。 preset-env / stage-x 主要用於 es 的語法轉義，

　　　　二、用於補丁的配置，即 polyfill 的配置。主要是 transform-runtime 。

　　　　三、用於不一樣框架的配置，如：react的jsx /flow 等

　　例子：

{
　　"presets":[
　　　　"react",
　　　　["env",{...}],
　　　　"stage-0"
　　],
　　"plugins":[
　　　　"pluginName",
　　　　["transform-runtime",{...}]
　　],
　　"ignore":["path",'file'],
　　"miniied":boolean,
　　"comments":boolean,
　　"env":{
　　　　"test":{
　　　　　　"presets":[],
　　　　　　"plugins":[]
　　　　}
　　},
　　...
}