当前位置 > it书童 > webpack > 正文

webpack 通过 babel 转换 es6 语法

webpack it书童 2020-02-08 10:50:02 0赞 0踩 70阅读 0评论

webpack 不处理 es6

虽然 chrome 浏览器对 es6 的支持很友好,仍然有不少低版本的浏览器对 es6 支持很差

默认情况下,webpack 并不会对 es6 进行转换

如:

index.js

let a = 'hello es6'
const arr = [
    new Promise(() => {}),
    new Promise(() => {})
]
arr.map(item => {
    console.log(item)
})

编译后查看生成的 main.js 底部,发现是将 es6 代码原样输出

使用 babel

babel 能将 es6 转成 es5

安装 babel

$ npm install --save-dev babel-loader @babel/core
$ npm install @babel/preset-env --save-dev

配置 webpack

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    "presets": ["@babel/preset-env"]
                }
            }
        ]
    },
    // ...
}

再次编译,查看 main.js, 发现 es6 能够成功转成 es5, 但只是转换了语法,并没有引入相应的库,还需要安装 @babel/polyfill

$ npm install --save @babel/polyfill

在 index.js 引入

import "@babel/polyfill"
// ...

再次编译,虽然能引入相应的 es6 类库,但生成的 js 文件太大了

这是因为默认情况下,babeljs 将所有 es6 到 es5 的转换都加载了,造成很多不必要的消耗

源码

按需转换类库

修改配置

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel-loader",
    options: {
        "presets": [
            [
                "@babel/preset-env",
                {
                    // 当 polyfill 填充低版本浏览器不存在的特性时,不是全部加上,而是按需加载
                    useBuiltIns: "usage"
                }
            ]
        ]
    }
}

编译后生成的文件就变小了许多

源码

转载须注明出处:https://www.itshutong.com/articles/414/webpack-transforms-es6-syntax-through-babel
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录