reactjs - 如何设置 babelrc 文件以及为什么？

Question

我对 babel.rc 配置文件有疑问。

我搜索并看到了两个不同的配置文件示例。

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": ["syntax-dynamic-import"]
}

和

{
  "presets": [
    [
      "env",
      {
        // leave imports as they are
        "modules": false
      }
    ]
  ],
  "plugins": [
    // support dynamic import syntax, but leave it unchanged
    "babel-plugin-syntax-dynamic-import"
  ]
}

我的问题是:

1)es2015预设和env预设有什么区别？

2)为什么我们需要 module 选项为 false？我明白了指示 Babel 不要尝试解析导入。但是为什么我们需要它呢？

3)动态导入怎么样？为什么需要使用插件？模块之间有关系吗:false选项？

4)浏览器对动态导入的支持怎么样？babel可以将其转换为ES5吗？动态导入和代码分割可以在IE10或IE11上使用吗？我们如何知道哪个浏览器支持动态导入和代码分割？

Answer 1

广告 1 - babe-preset-es2015

This is deprecated. If you want to stay up to date, use the env preset

作者注:

instead of making more yearly presets 😭 , Babel now has a better preset that we recommend you use instead: npm install babel-preset-env --save-dev. preset-env without options will compile ES2015+ down to ES5 just like using all the presets together and thus is more future proof

Ad 2 - Modules 设置为 false 以确保 import 语句保持原样(而不是将它们转译为 require)。例如:您可以这样做以使 Webpack 能够静态分析我们的代码以生成更高效的包。

Ad 3 - 它允许解析 import()。我不知道是否与模块选项有关。

广告 4 - “注意:动态 import() 在 Chrome 63 和 Safari 技术预览版 24 中可用” -> 来源:Dynamic imports