Babel的使用

babel工具

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

所需的包

@babel/corebabel核心功能模块
@babel/clibabel CLI命令行工具
@babel/preset-envbabel预设(包含一组设定好的插件)
@babel/polyfill提供完整的ES2015+环境

配置方式

文件配置Babel有三种方式：全局配置，.babelrc(或者.babelrc.js)以及带有"babel"配置的package.json文件

1、整个项目配置

在最新的Babel7.x版本中，babel有了一个‘root’目录，默认就是当前工作目录（命令行所在目录）。对于整个项目的配置，Babel会自动在根目录搜索babel.config.js。用户也可以用一个制定的"configFile"配置去覆盖默认配置文件。因为项目全局配置文件是分散开的，所以它们是广泛应用配置的理想型，甚至能让node_modules或者symlinked packages(不知道这是个啥)中的插件（plugin）和预设（preset）轻松地应用到文件中去。这在Babel 6.x版本中配置是很烦的。
缺点： 这种项目全局配置的主要缺点是它依赖工作目录，这在monorepos项目中使用会让人更烦（如果工作目录不是这个项目根目录）。当然可以设置"configFile"值为false来禁用全局文件配置。

2、文件相对配置

Babel通过正在编译的文件开始搜索文件结构，加载.babelrc(and .babelrc.js/package.json#babel)文件。因为这样可以让你为一个包的不同片段创建互不相干的配置。这种相对于文件的配置同时也会merge整个项目的配置，也会覆盖全局的一些配置，十分有效。
两个不常见的使用文件相对配置的限制：

• 当一个文件目录中找到了一个package.json文件就会停止搜索，所以一个相对配置就只应用于单个包内部。
• 一个被编译的文件必须在“babelrcRoots”包下，否则都会被整体忽略。

配置文件会有一些说明：

• .babelrc文件仅仅只应用于他们自己的包内。
• .babelrc如果不在Babel’s ‘root’目录内则会被忽略，除非你指定一个‘babelrcRoots’
  可以通过设置“babelrc”的值为false来禁用文件相对配置。

Babel 6.x和7.x版本.babelrc加载的区别

上述两个限制的添加，解决Babel 6.x中的常见脚注：

• .babelrc应用于node_modules依赖项的文件，通常是意外的。
• .babelrc无法应用于node_modules符号链接的文件
• .babelrc在node_modules依赖中的文件会被检测到，尽管他们中的插件和预设通常没有安装，在这个6.x的版本下编译都不会有效。

这种问题主要出现在拥有monorepo项目结构的用户中，如：

.babelrc
packages/
  mod1/
    package.json
    src/index.js
  mod2/
    package.json
    src/index.js

这个.babelrc配置会被完全地忽略，因为他超出了包的边界。
可以通过在子包中创建.babelrc文件，使用extends来解决这个问题。

{ "extends": "../../.babelrc" }

但是这种方式会造成重复，并且要看Babel是怎样使用的，需要设置“babelrcRoots”
因此还不如换做使用项目全局设置babel.config.js，但是要注意设置一个“configFile”（防止工作目录不正确）

Monorepos

monorepo结构的仓库通常包含几个包，这意味着它们经常遇到文件相关配置 和配置文件加载中提到的警告。本节旨在帮助用户了解如何处理monorepo配置。
对于monorepo设置，要理解的核心是Babel将您的工作目录视为其逻辑“根”，如果您想在特定子包中运行Babel工具而不将Babel应用于整个repo，则会导致问题。
另外决定使用.babelrc文件还是采用全局配置文件babel.config.js文件也很重要。

根babel.config.js文件

如果是一个monorepo文件结构的项目，首先应该创建一个babel.config.js文件在根目录。尽管你想使用.babelrc文件来配置每一个包，配置repo-level选项还是很重要的。

如果你在子包内使用babel命令行：

cd packages/some-package;
babel src -d dist

这便找不到babel.config.js文件。但是有个方法是指定"rootMode"选项，值为“upward”，这会让babel向上查找babel.config.js文件，并且使用那个目录作为root目录。
在webpack中配置：

module: {
  rules: [{
    loader: "babel-loader",
    options: {
      rootMode: "upward",
    }
  }]
}