用 Babel 去构建 TypeScript 项目

一、Babel 编译 TS

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

npm init -y && npm install -D @babel/core @babel/cli && mkdir src && cd src 

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

class Person {
    name:string;//@babel/plugin-proposal-class-properties就是支持这个写法的
}

// @babel/plugin-proposal-object-rest-spread 支持...扩展运算符/剩余参数
let [a , ...b] = [1 , 3 , 6];//剩余参数
let arr = [1 , 2 , 3];
let result = [...arr];//强制结构

//@babel/plugin-proposal-decorators 装饰器的语法糖@
function main(obj){
    console.log(obj);
}
@main
class People {

}

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

npm install -D @babel/preset-env @babel/preset-typescript
npm install -D @babel/plugin-proposal-class-properties
npm install -D @babel/plugin-proposal-object-rest-spread babel/plugin-proposal-decorators

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

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

"scripts": {
  "build": "npx babel src -d dist -x \".ts, .tsx\"",
  "dist": "npx babel src --out-dir dist --extensions '.ts , .tsx'"
},

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

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

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
}

使用的时候注意下面两点：
1.If you are including your plugins manually and using @babel/plugin-proposal-class-properties, make sure that @babel/plugin-proposal-decorators comes before @babel/plugin-proposal-class-properties.

2. When using the legacy: true mode, @babel/plugin-proposal-class-properties must be used in loose mode to support the @babel/plugin-proposal-decorators.

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

npm run build
Successfully compiled 1 file with Babel.

二、类型检查

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

let num:number = 123;
num = "string";

输入命令：

npm run dist

依然编译成功，所以：

请务必牢记 Babel 不做类型检查，如果需要类型检查安装 TypeScript 来执行类型检查的工作。

现在来配置，安装 typescript：

npm install -D typescript

初始化配置文件：

npx tsc --init

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

"noEmit": true,                        /* Do not emit outputs. */

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

npx tsc --watch

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

三、babel 环境 TS 兼容问题

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

• 命名空间 namespace
• 模块兼容 export = xx
• 类型断言只支持 as 方式
• 常量枚举 const enmu {}

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

webpack 使用 ts-loader来编译检查 TypeScript 的时候，随着项目越来越大，速度会变慢这时需要
我们配置 options:{ transpileOnly:true }表示 ts-loader只做编译不做类型检查
这时类型检查可以交给插件fork-ts-checker-webpack-plugin
各司其职的好处就可以提高文件的编译速度