欢迎光临
我们一直在努力

webpack Babel处理ES6语法

文章目录

通过Babel可以处理ES6语法,将其转换为不支持ES6语法的浏览器可以识别的JS代码。

安装

npm install --save-dev babel-loader @babel/core
// 可以把@babel/core简单理解为babel的核心库
npm install --save-dev @babel/preset-env
// preset-env用于将语法翻译成ES5语法 该模块包含了所有翻译成ES5语法的规则
npm install --save @babel/polyfill
// 将Promise,map等低版本中没有实现的语法,用polyfill来实现

配置module

module: {
  rules: [
    {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            options: {
                "presets": [
                    [
                        "@babel/preset-env",
                        {
                            "useBuiltIns": "usage"
                        }
                    ]
                ]
            }
        }
  ]
}
// exclude参数: node_modules目录下的js文件不需要做转es5语法,也就是排除一些目录
// "useBuiltIns": "usage" 
//会根据配置的浏览器兼容,以及代码中用到的 API 来进行 polyfill,实现了按需添加

在使用之前,要在需要转换语法格式的JS文件导入

import "@babel/polyfill"

如果不设置 "useBuiltIns": "usage" ,我们打包出来的文件体积会非常大,这是因为@babel/polyfill为了弥补低版本浏览器不支持Promise,map等语法的功能,要自己去实现,这也就导致了文件很大。所以我们在上面才要去配置:

"useBuiltIns": "usage"

小记

  • 需要安装babel-loader @babel/core这些库
  • 我们可以简单的把@babel/core理解为babel的核心库
  • @babel/polyfill可以把ES6语法转换为低版本可以识别的语法
  • 通过import "@babel/polyfill" 在JS文件开头引入,完成对ES6语法的polyfill

更多配置请参考 Babel 官方文档

拓展内容

当你生成第三方模块时,或者是生成UI组件库时,使用polyfill解决问题,就会出现问题了,上面的场景使用babel会污染环境,这个时候,我们需要换一种方案来解决

@babel/plugin-transform-runtime这个库就能解决我们的问题,那我们先安装需要的库

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

我们这个时候可以在根目录下建一个.babelrc文件,将原本要在options中的配置信息写在.babelrc文件

{
    "plugins": [
      [
        "@babel/plugin-transform-runtime",
        {
          "corejs": 2,
          "helpers": true,
          "regenerator": true,
          "useESModules": false
        }
      ]
    ]
  }
// 当你的 "corejs": 2,需要安装下面这个
npm install --save @babel/runtime-corejs2

这样子的话,在使用语法是,就不需要去通过import "@babel/polyfill";这样子的语法去完成了,直接正常写就行了,而且从打包的体积来看,其实可以接受的

小结

  • 从业务场景来看,可以使用@babel/preset-env
  • 从自己生成第三方库或者时UI时,使用@babel/plugin-transform-runtime,它作用是将 helper 和 polyfill 都改为从一个统一的地方引入,并且引入的对象和全局变量是完全隔离的,避免了全局的污染
赞(0) 打赏
未经允许不得转载:散人研 » webpack Babel处理ES6语法
分享到: 更多 (0)

如果文章有不解或描述错误的地方,欢迎在评论区提问或指正!

评论 抢沙发

3 + 6 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏