babel從入門到進階只需搞定這幾個包

安裝babel：

babel目前需要安裝 @bable/core 和 @babel/preset-env ，在webpack上還需要安裝babel-laoder

@bable/core ：

這個比較好理解，就是babel的核心文件

@babel/preset-env:

babel預置器，這個預置器大概有一下幾種版本：

es2015
es2016
es2017 
env        //包括上面三個，官方推薦只使用這個
babel-preset-react       //使用react的一些定製規範
bebel-preset-stage 0-3      //使用規範組還未正式發佈的規範

衆所周知babel是編譯轉換ES6+代碼的，預置器目的是告訴babel我們會用到什麼版本的js規範，babel會根據我們的指定安裝所需插件和補丁

.babelrc

.babelrc配置：
格式：

{"presets" :[ "env" /* 我們用到的最新的js規範版本，官方推薦 @babel/preset-env */ , { /*env的配置options*/}] }

一些可能用到的配置項：

{
    "presets": [
        ["env", {
            "targets": { //指定要轉譯到哪個環境
                //瀏覽器環境
                "browsers": [">1%", "last 2 versions", "safari >= 7"],
                //node環境
                "node": "6.10", //"current"  使用當前版本的node
            },
             //是否將ES6的模塊化語法轉譯成其他類型
             //參數："amd" | "umd" | "systemjs" | "commonjs" | false，默認爲'commonjs'
            "modules": 'commonjs',
            //是否進行debug操作，會在控制檯打印出所有插件中的log，已經插件的版本
            "debug": false,
            //強制開啓某些模塊，默認爲[]
            "include": ["transform-es2015-arrow-functions"],
            //禁用某些模塊，默認爲[]
            "exclude": ["transform-es2015-for-of"],
            //是否自動引入polyfill，開啓此選項必須保證已經安裝了babel-polyfill
            //參數：Boolean，默認爲false.
            "useBuiltIns": false
        }]
    ]
}

babel-loader：

webpack內結合babel-loader配置預置器選項：
可以直接把babelrc的配置寫在webpack.config.js內，不用在外面新建.babelrc了：

//webpack.config.js：

module.exports={
	...
	module:{
		rules:[
			{test:/\.js$/,
			use:{
				loader:'babel-loader',
				options:{
					presets:[     //和babelrc一樣的配置，只是寫在options裏了
						['@babel/preset-env',{
							targets:{
								"browsers": [">1%", "last 2 versions", "safari >= 7"],
							}
						}
					]
				}
			}
		]
	}
	...
}

@babel/polyfill：

上面用到的babel的preset預置器只是針對於語法，對於函數、方法：
generator set map Array.from Array.prototype.includes 等等

會污染全局變量（會重寫但是命名不變），應用場景使用：
npm install babel-polyfill --save

用法：
import 'babel-polyfill 引入即可

關於polyfill還有個叫做polyfill.io的神器，只要在瀏覽器引入

https://cdn.polyfill.io/v2/polyfill.js

服務器會更具瀏覽器的UserAgent返回對應的polyfill文件，很神奇，可以說這是目前最優雅的解決polyfill過大的方案。

@babel/polyfill 在preset-env的新版本下已不推薦使用：

@babel/polyfill是一個簡單的包，包含core-js和regenerator-runtime這兩個包。當core-js升級到3.0的版本後，將放棄使用@babel/polyfill，因爲它只包含core-js 2.0的版本。所以在@babel/prest-env升級到7.4.0並且使用core-js@3，需要做如下的替換工作

// 安裝[email protected] 和 regenerator-runtime
yarn add core-js@3
yarn add regenerator-runtime


// babel.config.js
presets: [
  ["@babel/preset-env", {
    useBuiltIns: "entry", // or "usage"
    corejs: 3,
  }]
]


// 入口文件index.js
// before
import "@babel/polyfill";

// after
import "core-js/stable";
import "regenerator-runtime/runtime";

@babel/plugin-runtime-transform

npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime --save
局部墊片，不會污染全局變量(重寫且命名改變new Set()會被編譯成 new _Set())
大小比polyfill小
必須要在babelrc下配置

{"preset":["env",{ /* 預置器的一些配置見上文*/}],
  "plugins":["@babel/plugin-transform-runtime"]
}