babel 用法及其 .babelrc 的配置详解，想做前端架构，拒绝一知半解...
?
Babel
?
官方介紹：將 ECMAScript 2015 及其版本以后的 javascript 代碼轉為舊版本瀏覽器或者是環境中向后兼容版本的? javascript 代碼。
簡而言之，就是把不兼容的 JavaScript 代碼轉為可兼容，可以執行的 JavaScript 代碼。
?
功能：
?
語法轉換?
添加一些兼容性的 polyfill 功能
源碼轉換等
?
簡單配置預覽：
?
{"plugins": [], // 插件配置"presets": [] // 預設配置 }// 這里 .babelrc 配置的// 官網建議用 module 的形式來配置，bable.config.jsconst presets = [] const plugins = [] module.exports = { presets, plugins }
?
配置介紹：
?
presets ：是某一類 plugin 的集合，包含了某一類插件的所有功能。
plugin ： 將某一種需要轉化的代碼，轉為瀏覽器可以執行代碼。
?
?
編譯的執行順序：
?
1、執行 plugins 中所有的插件
2、plugins 的插件，按照順序依賴編譯
3、所有 plugins 的插件執行完成，在執行 presets 預設。
4、presets 預設，按照倒序的順序執行。(從最后一個執行)
5、完成編譯。
?
1、主要插件介紹
?
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
?
?
2、主要 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 集合中，所以需要引用....
?
?
3、babel-polyfill 兼容方法
?
babel的 preset-dev 中只會轉化新的 Javascript 語法，不會轉化新的 api。
例如：Generator / Set / Map 等?
就是實現 babel 轉化后的代碼中，仍有不兼容的代碼的轉化。
?
原理：
babel-folyfill 是修改全局的對象的原型，添加不兼容的 api 方法，或者修改不兼容的 api 方法。
?
用法：
?
1、在入口文件的頂部添加：
require('@babel-polyfill');import '@babel-polyfill'
2、webpack 中添加
?
{entry:['@babel-polyfill','./app.js'] }在 webpack 的配置文件中添加。
?
3、直接在 html 中引用，在打包 js 的文件之前
?
<script src = './babel-polyfill.js' ></script>
?
4、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 ： 引用時候名字
?
?
5、@babel-register
?
通過 @babel-register 來注冊當前所有的代碼需要轉碼
?
var fs = require('fs'); var babelConfig = JSON.parse(fs.readFileSync('./.babelrc')); require('babel-register')(babelConfig);
很顯然，這里可以傳入一個 .babelrc 配置文件來進行轉碼時候的配置。
只需要添加到入口文件中。
node 端就可以這這樣實現 babel 的轉碼。
?
6、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 三種不同作用：
1、用于語法轉義的配置。 preset-env / stage-x 主要用于 es 的語法轉義，
2、用于補丁的配置，即 polyfill 的配置。主要是 transform-runtime 。
3、用于不同框架的配置，如：react的jsx /flow 等
?
例子：
{"presets":["react",["env",{...}],"stage-0"],"plugins":["pluginName",["transform-runtime",{...}]],"ignore":["path",'file'],"miniied":boolean,"comments":boolean,"env":{"test":{"presets":[],"plugins":[]}},... }
主要幾個配置
presets ： 預設，插件的集合，倒序執行
plugins ： 插件，先執行插件，在執行預設，順序執行
ignore ： 忽略的文件
minify ： 壓縮代碼
common : 是否需要注釋
env ： 設置不同的環境，應用不同的配置，配置取值：BABEL_ENV，如若沒有取 NODE_ENV 的值，默認為 development.
?
其他可以自行在官網瀏覽...
?
?
?
常見預設
env? ： 用于替換 es2015 /? es2016 / es2017 的預設。根據環境引入插件
react ：react的插件集合
react-optimize ： react 代碼優化，如去除 propsType 減少生產上面代碼
stage-x ：草案代碼插件集合
flow ： flow 插件集合
minify ： 代碼優化的集合
typescript ： typescript 插件集合
?
?
常用插件
transform-async-to-generator ： 異步函數 async/await 插件
transform-decorators-leagacy : 裝飾器插件
syntax-dynamic-import ：import() 插件
transform-runtime ： 輔助器插件，用于ployfill
transform-object-rest-spread : 用于合并 var test = {a:1,b2};var t = {...test,n:1}
transform-funciton-bind : 用于編譯 obj::fun => fun.bind(obj)
transform-es2015-modules-commonjs ：es6 module 在 node 使用
?https://www.cnblogs.com/jiebba/p/9613248.html?
? ?我的博客 ：??XiaoLong's Blog
? ?博客園小結巴巴：?https://www.cnblogs.com/jiebba
?
轉載于:https://www.cnblogs.com/jiebba/p/9613248.html
總結
以上是生活随笔為你收集整理的babel 用法及其 .babelrc 的配置详解，想做前端架构，拒绝一知半解...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SHA256算法原理详解图
- 下一篇： web前端开发面试题（答案）