webpack3 babel相关

axu1997 2020-04-29 原文

babel

在index.js中写入js6的语法如

let fn = (){
    console.log('this is es6')
}

执行npm run build

在打包出来的js文件中搜索fn会看到如下片段结果mode状态为development

fn = ()=>{\r\n    console.log(\"this is es6\")\r\n}\r\nfn()\r\n\n\n//# sourceURL=webpack:///./src/index.js?")

可以看到箭头函数依旧以箭头函数的方式输出，而没有以es5的方式输出
接下来安装babel-loader

npm install -D babel-loader @babel/core @babel/preset-env webpack

在module rules中进行配置

{
    test: /\.js$/,
        use: [
            {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                },

            }
        ]
}

再次打包，执行后在js文件中查看fn可以发现如下代码

fn = function fn() {\n  console.log(\"this is es6\");\n};\n\nfn();\n\n//# sourceURL=webpack:///./src/index.js?")

可见此时的箭头函数已经被转化为es5的语法了

在src下将要打包的js文件中写如下高级语法

class Test{
    a = 11
}

打包时发现报错并且出现以下提示

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

也就是下载安装

npm i @babel/plugin-proposal-class-properties -D

接着重新进行配置

{
        test: /\.js$/,
        use: [
            {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'] , 
                    plugins:[
                        '@babel/plugin-proposal-class-properties'
                    ]  
                },

            }
        ]
}
``