如何配置 babel

在此之前你需要首先了解一下什么是 babel ，以及 babel的使用指南 如果你需要其他babel的版本，还请参考[ https://babel.docschina.org/versions] 。

Babel是可以配置！许多其他工具具有类似的配置：ESLint (.eslintrc), Prettier (.prettierrc)。

允许使用所有 Babel API选项 。然而，如果该选项需要JavaScript，您可能需要使用Javascript 配置文件 。

在项目的根目录下(package.json的位置)创建一个名为babel.config.js的文件，其中包含以下内容:

查看 babel.config.js文档 ，以查看更多配置选项。

在项目的根目录下(package.json的位置)创建一个名为.babelrc的文件，其中包含以下内容:

查看 .babelrc文档 ，以查看更多配置选项。

或者，您可以选择在package.json中，使用babel键值指定.babelrc配置，如下所示：

与.babelrc的配置结构相同，但你可以用JavaScript编写它。

您可以访问任何Node.js API，例如基于流程环境的动态配置：

查看 babel-cli文档 ，以查看更多配置选项。

查看 babel-core文档 ，以查看更多配置选项。

现在空项目中创建 package.json 文件，再去安装 Babel，@babel/core 是 babel 的核心，@babel/cli 是 Babel 的命令行，可以在终端使用 Babel 的命令行，输入 npx babel --help 查看所有的命令。接下来创建 src 目录并进入：

在 src 里面新建 index.ts 文件，文件的内容为：

为了支持上面的语法需要继续安装三个插件插件和两个预设

@babel/preset-env 预设能够支持大多数 ES6 语法，少数的语法需要使用插件， @babel/preset-typescript 翻译 TS 文件的。

这时在 package.json 文件的 scripts 里面新增以下内容：

build 是 dist 的简写版本，功能是一样的，Babel 不能自己识别 .tsx和.ts 文件，所以需要 --extensions 指定文件，简写为 -x 。

还剩最后一道程序，在 package.json 同级目录下新建 babel.config.json 文件，输入以下内容：

好了，现在输入命令行进行编译：

现在我把 index.ts 的内容改为：

输入命令：

依然编译成功，所以：

现在来配置，安装 typescript：

初始化配置文件：

打开配置文件 tsconfig.json，更改 noEmit 配置项，表示 typescript 只执行类型检查不编译输出文件：

这时在命令行执行，持续监听文件的更改就行了：

类型检查配置完成。这时 Babel 负责编译，typescript 负责类型检查。

Babel 环境中 TypeScript 中的语法又四个不能使用：

现在还是推荐使用主流方式去构建 TypeScript 项目，即 webpack 的方式，使用 ts-loader 配合 typescript 实现。附赠一个技巧：

---