參考了《在webpack配置babel轉(zhuǎn)換es6，兼容ie11，在webpack中使用babel-preset，babel-polyfill》這篇文章。
近日，在做網(wǎng)站開(kāi)發(fā)的項(xiàng)目中遇到了頭疼的事兒。項(xiàng)目使用js開(kāi)發(fā)，用webpack打包編譯，js使用了ES6的語(yǔ)法。其結(jié)果是網(wǎng)站在FireFox、Chrome這些瀏覽器上都沒(méi)有問(wèn)題，但是在IE11瀏覽器中，有的代碼會(huì)報(bào)錯(cuò)。這就意味著，某些ES6的語(yǔ)法太新了，IE11不認(rèn)?。◤牧硪环矫嬲f(shuō)，IE11確實(shí)太落后了）。
解決的辦法就是將ES6的語(yǔ)法轉(zhuǎn)化為ES5的語(yǔ)法。
步驟如下：
- 安裝
babel-loader和@babel/core核心庫(kù)：
yarn add babel-loader @babel/core -D
- 在
webpack配置文件中配置babel：
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
這些代碼是說(shuō)：在編譯js文件時(shí)，使用babel-loader加載器，但是編譯的文件中不包含node_modules文件夾下的第三方庫(kù)。
目前，我們只是將webpack與babel聯(lián)系到一起了，但是應(yīng)該怎樣編譯這些js文件，babel還不知道，因此就有了下面這步。
- 安裝
@babel/preset-env插件，用它來(lái)轉(zhuǎn)ES6語(yǔ)法：
yarn add @babel/preset-env -D
- 修改之前第2步的配置，添加ES6語(yǔ)法轉(zhuǎn)ES5語(yǔ)法的功能：
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
options:{
presets: ["@babel/preset-env"]
}
}
]
}
4.1 也可以更優(yōu)雅一些，不把第4步的配置項(xiàng)寫到第2步的配置項(xiàng)中。做法是在項(xiàng)目的根目錄下新建一個(gè).babelrc文件，內(nèi)容如下：
{
"presets": ["@babel/preset-env"]
}
這樣，配置項(xiàng)還是用第2步的，不用更改。項(xiàng)目在編譯的時(shí)候，會(huì)自動(dòng)找到這個(gè).babelrc文件，并加載里邊的配置項(xiàng)。這種方式更靈活，代碼量少，閱讀的時(shí)候清楚，只是要注意，要用json文件的那種雙引號(hào)的寫法。
至此，將ES6的語(yǔ)法轉(zhuǎn)化為ES5的語(yǔ)法就配置完成了，比如它會(huì)將const，let轉(zhuǎn)為var，將箭頭函數(shù)轉(zhuǎn)為function等等。項(xiàng)目在IE11中也不報(bào)錯(cuò)了。
但是我的項(xiàng)目中并沒(méi)有使用到promise或weakmap等新的語(yǔ)法，按照開(kāi)頭參考文章中所介紹的，對(duì)于這些語(yǔ)法，還應(yīng)該使用@babel/polyfill庫(kù)，對(duì)此，我目前還沒(méi)有驗(yàn)證過(guò)，如果在后續(xù)項(xiàng)目中用到了，再回到這里補(bǔ)充完整。
