一、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.
- 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
各司其职的好处就可以提高文件的编译速度
网友评论