babel简单介绍

babel是什么

babel-loader并不会直接翻译js文件，它只是webpack和babel的桥梁，还需要其他模块来翻译j语法

babel的用法

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        presets: [
            ['@babel/preset-env', {
                useBuiltIns: 'usage',
                corejs: '3',
                targets:{
                    "chrome": "58",
                    "ie": "11"   
                }
            }]
        ]
    }
}

安装@babel/preset-env，它包含了所有es6转es5的规则

但bebel只是翻译了一部分，但是像promise、map这样的语法，在低版本浏览器中还是不兼容的，这时候我们需要用babel-polyfill

安装@babel/polyfill

使用方法：

• 全局引入：import "@babel/polyfill”；缺点是将所有的polyfill都打包到了文件中，有很多不必要的代码，会导致打包文件过大
• 解决办法：去掉全局引入，在webpack中设置useBuiltIns为usage

报错解决办法：yarn add npm install core-js@3 --save

使用babel-runtime

如果是写第三方类库，不能使用@babel/preset-env和@babel/polyfill的方式，因为他们打包出来的代码，会创建一些全局变量，污染全局环境，所以要使用babel-runtime。如果只是业务代码，就只需要使用上述方式。如果是库项目代码，要使用babel-runtime

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        // presets: [
        //     ['@babel/preset-env', {
        //         useBuiltIns: 'usage',
        //         corejs: '3',
        //         targets:{
        //             "chrome": "58",
        //             "ie": "11"   
        //         }
        //     }]
        // ]
        "plugins": [["@babel/plugin-transform-runtime",{
            "absoluteRuntime": false,
            "corejs": 2,
            "helpers": true,
            "regenerator": true,
            "useESModules": false,
            "version": "7.0.0-beta.0"
        }]]
    }
}

.babelrc文件

如果babel的配置项比较多，可以创建一个.babelrc文件单独处理babel的配置。