babel需要这样配置

babel-loader内部会调用@babel/core 进行语法转换，@babel/core的转换依赖预设@babel/preset-env和插件plugin，安装插件要根据自己的环境特定的安装。

推荐阅读Babel 用户手册进行进一步了解

开始配置

先安装最常用的两个包

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

@babel/preset-env这个包官方说是智能预设，怎么智能了，你只要给出一个浏览器的版本号，就知道哪些语法要转，哪些语法不要转。可以有效的避免把不需要转换的语法也转换了，浪费性能，浏览器都有这个语法，再加个转换就没必要了。

.babelrc文件

{
  "presets": ["@babel/preset-env"],
  {
    "targets": {
      "chrome": "58",
      "ie": "11"
    }
  }
}

所以官方不建议以这种方式使用预设环境，因为它没有利用针对特定浏览器的功能。

{
  "presets": ["@babel/preset-env"]
}

你以为这样就完了吗，然后并不是，重要的是要注意，@ babel / preset-env不支持stage-x插件。与之相比，stage-x直接被删了。这是因为 babel 团队认为为这些 “不稳定的草案” 花费精力去更新 preset 相当浪费。

如果我们想要用怎么办，那就得打补丁，给这些语法加上呀。

现在说一下

一个插件，通过Babel注入的帮助函数来节省代码大小。

npm install  @babel/plugin-transform-runtime -D

npm install  @babel/runtime -S

Babel使用很小的帮助程序来实现_extend等常用功能。默认情况下，它将被添加到需要它的每个文件中。有时不需要重复，特别是当您的应用程序分布在多个文件中时。

这就是@ babel / plugin-transform-runtime插件的出现：所有帮助函数的代码都将引用模块@ babel / runtime，以避免在编译后的输出中出现重复。运行时将被编译到您的构建中。

添加补丁包 @babel/runtime-corejs3

npm install  @babel/runtime-corejs3 -D

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ],
    "@babel/plugin-proposal-class-properties"
  ]
}

babel需要这样配置

开始配置

相关推荐