Babel 6 升级到 Babel 7

Babel 6 到 Babel 7

Babel 是个从开发环境到生产环境的中间环境，提供大而全的插件和预设配置，由开源社区维护，可以配合各种构建工具，例如 webpack parcel gulp grunt 之类的，让前端不局限于前端。如果还没开始使用那要赶紧尝试。

Babel 6 的配置比较简单，这里不多说了，主要是讲升级到 Babel 7 需要注意的细节

Babel 7 库的作用域 (scope)

Babel 7 用了 npm 的 private scope，把全部的包都挂在在 @babel 下，类似的有 typescript 的 @type。

这个改进挺好的，需要查看 node_modules 的时候不再看到一堆 babel-xxx 的包了，都在 @babel/xxx 之下。清爽了不少。

Babel 7 提供多种配置

• .babelrc
• babel.config.js
• webpack babel loader

Babel 7 的 .babelrc 的作用范围

Users coming from Babel 6.x will likely trip up on these two edge cases, which are new in Babel 7.x. These two restrictions were added to address common footguns in Babel 6.x:

babel 7 开始, .babelrc 的作用范围仅限于当前项目，默认不再作用与 node_modules 和工作区 (./packages/*)，如果需要，可以指定作用范围

在项目 rootDir 创建 babel.config.js, 写入以下配置即可

module.exports = (api) => {
  api.cache(true);
  // https://babeljs.io/docs/en/next/config-files#project-wide-configuration
  return {
    "babelrcRoots": [
      ".",
      "./packages/*"
    ]
  };
};

这样可以作用于更多的指定环境之中，更灵活使用，性能更高

参考

• react app seed
• babel configuration
• 原文地址