（二）webpack babel詳解

1.安裝

npm install @babel/core -d
npm install @babel/cli -d
           

2.使用

npx babel src --out-dir result //指将src檔案夾下檔案用babel轉化後放到result檔案夾下

           

3.使用插件

npm install @babel/plugin-transform-arrow-functions -d //安裝箭頭函數轉化插件
npx babel src --out-dir result [email protected]/plugin-transform-arrow-functions  //使用箭頭函數轉化插件

npm install @babel/plugin-transform-block-scoping -d //安裝作用域（const=>var）轉化插件
npx babel src --out-dir result [email protected]/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping //使用上述兩個插件
           

4.使用babel預設

npm install @babel/preset-env -d //安裝相當于一系列插件組合
npx babel src --out-dir result  [email protected]/preset-env //使用babel預設
           

這個preset會使用哪些插件取決于.browserslistrc中你要适配哪些浏覽器，preset會幫你使用需要的插件來适配。

面對哪些浏覽器，也可以在webpack.json.js中設定

module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets:[
                            ["@babel/preset-env",{
                                targets:["chrome 88"]
                            }]
                        ]
                    }
                }
            }
        ]
    }
           

5.babel底層原理

源代碼：

tokens：

抽象文法樹：

6.使用babel-loader

//webpack中配置
//法一
module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: "babel-loader",
                options: {
                    plugins: [
                        '@babel/plugin-transform-arrow-functions',
                        '@babel/plugin-transform-block-scoping'
                    ]
                }
            }
        }
    ]
}

法二：
module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: "babel-loader",
                options: {
                    presets:[
                        "@babel/preset-env"
                    ]
                }
            }
        }
    ]
}
           

7.babel配置檔案

//babel.config.js
module.exports={
presets:[
"@babel/preset-env"
]
}
           

8.folyfill

npm install core-js regenerator-runtime --save
           

//babel.config.js(相當于設定webpack.config.js中的module中使用babel-loader的詳細設定)
module.exports = {
    presets: [
        ["@babel/preset-env",{ //使用@babel/preset-env preset
            useBuiltIns:"usage", //使用polyfill  該屬性值（false:不适用polyfill,usage:使用代碼裡有的特性,entry:要适配的浏覽器所有特性）
            					//當值為entry時，還要在入口檔案寫入 import "core-js/stable";  import "regenerator-runtime/runtime";否則該屬性無效
            corejs:3  //corejs的預設版本為2，是以得設定為3
        }]
    ]
}

注意：在webpack.config.js中，要将exclude設定為/node_modules/,因為在node_modules中，也可能使用了與folyfill不同的特性，是以不需要對其進行轉化。
           

9.plugin-transform-runtime

因為我們在使用useBuiltIns時，加入的特性是放在全局裡面的，可能會污染一些代碼。而plugin-transform-runtime卻不是這樣。是以我們在寫一些第三方庫的時候會使用plugin-transform-runtime而不是useBuiltIns。

npm install @babel/plugin-transform-runtime -d
npm install @babel/runtime-corejs3 --save
           

//babel.config.js
module.exports = {
    presets: [
        ["@babel/preset-env"]
    ],
    plugins:[
        ["@babel/plugin-transform-runtime",{corejs:3}]
    ]
}
           

10.ts的轉換

法一：ts-loader

npm install typescript -g
npm install ts-loader -d
npm link typescript
tsc --init
           

//webpack.config.js
{
    test:/\.ts$/,
    use:"ts-loader"
}
           

法二：babel-loader

如果ts中也有promise等es6特性，那麼需要使用babel來進行轉化。

npm install @babel/preset-typescript -d
           

//babel.config.js
module.exports = {
    presets: [
        ["@babel/preset-env",{
            useBuiltIns:"usage",
            corejs:3
        }],
        ["@babel/preset-typescript"]
    ]
}
           

//webpack.config.js
{
    test:/\.ts$/,
    use:"babel-loader"
}
           

兩種方法的優缺點

babel-loader可以使用polyfill，但不能對類型進行校驗

是以，建議在其他特性少時直接使用ts-loader，其他特性多時使用babel-loader進行打包，但用"tsc --noEmit"指令來檢測類型是否正确