webpack.config.js====配置babel，支持es6語法規則

更多內容已經遷移至掘金，歡迎來指導學習：

https://juejin.im/post/5d64cbd56fb9a06afe12a563

 

# 1. 安裝依賴

babel-loader: 負責 es6 語法轉化

babel-preset-env: 包含 es6、7 等版本的語法轉化規則

babel-polyfill: es6 內置方法和函數轉化墊片

babel-plugin-transform-runtime: 避免 polyfill 污染全局變量

 

cnpm install --save-dev babel-core babel-loader babel-plugin-transform-runtime babel-preset-env
cnpm install --save-dev babel-polyfill babel-runtime

 

# 2. 創建一個單獨的babel配置文件 .babelrc，配置如下

{
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions"]
}
}
]
],
"plugins": ["transform-runtime"]
}

 

# 3. 在webpack.config.js中的配置

module.exports = {
    module: {
        rules: [
            //配置babel，自動編譯es6語法
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader'
            }
        ]
    },
}

# 注意：babel-loader:8.X版本報錯的問題（建議直接使用7.1.5版本）

cnpm install --save-dev babel-loader@7.1.5

# 4. 測試

在js文件中，寫es6語法，然后編譯文件，如果順利通過，那么配置成功

 

# 5. 關於babel-polyfill

它需要在我們項目的入口文件中被引入，或者在webpack.config.js中配置：

require("babel-polyfill")

import "babel-polyfill"

　 一般在webpack項目中一般使用下面的方式

　 module.exports = {
　　　　entry: ["babel-polyfill", "./src/js"]
　　};

 

# 6.在 index.js中使用：

import "babel-polyfill";
let arr = [1, 2, 4];
let arrB = arr.map(item => item * 2);
console.log("可以使用ES6語法："+arrB.includes(8));