如何设置 babelrc 文件，为什么？答案

【问题标题】：How to set babelrc file and why?如何设置 babelrc 文件，为什么？
【发布时间】：2018-03-05 17:39:29
【问题描述】：

我对 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 preset和env preset有什么区别？

2）为什么我们需要模块选项为假？我明白了指示 Babel 不要尝试解析导入。但是我们究竟为什么需要它呢？

3）那么动态导入呢？为什么我们需要使用插件？modules:false选项之间有什么关系吗？

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

【问题讨论】：

标签： reactjs webpack ecmascript-6 code-splitting dynamic-import

【解决方案1】：

广告 1 - babe-preset-es2015

这已被弃用。如果您想保持最新状态，请使用 env 预设

作者注：

Babel 不再做更多的年度预设 ?，现在有一个更好的我们建议您使用的预设：npm install babel-preset-env --保存开发。不带选项的预设环境将 ES2015+ 编译为 ES5，就像一起使用所有预设一样，因此更具未来性证明

广告 2 - Modules 设置为 false 以确保 import 语句保持原样（反对将它们转换为 require）。例如：您可以这样做让 Webpack 能够静态分析我们的代码以生成更高效的包。

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

广告 4 - '注意：动态 import() 在 Chrome 63 和 Safari Technology Preview 24 中可用' -> 来源：Dynamic imports

【讨论】：