babel7 安装_babel7构建完美的纯ts开发环境

更新

[2019-5-9]更新

[2019-5-10]

Added

• Initial release

0、前言

由于最近在重写个人的原生ts插件项目, 遇到了集成jest单测的需求, 单纯地使用ts-jest + ts-loader会出现难以估计的错误, 所以决定使用babel, 完美摒弃了传统的ts-loader方案, 对于主要流程记录下.

项目地址:

ddzy/ts-utility-plugins​github.com

同时也欢迎 ts新手和想提升的你, 参与到项目中来, 详情可阅读

ddzy/ts-utility-plugins​github.com

一、基本配置

PS: 先通过简单的配置, 让 webpack正常解析 ts, 并且于测试环境中正常执行.

1.1 第一步: 卸载依赖

题目已经说的很清楚了, babel7的出现, 使得webpack对于ts文件的处理, 不再依赖于ts-loader等插件, 所以, 第一步就是和ts-loader港拜拜.

npm uninstall --save-dev ts-loader

1.2 第二步: 安装依赖

PS: 对于依赖项的取舍, 暂时还未摸清, 凡事先用明白, 再去探究其原理or优化.

暂时只用到了以下几种插件:

npm install --save-dev
  babel-loader
  @babel/preset-env
  @babel/preset-typescript
  @babel/plugin-proposal-class-properties
  @babel/plugin-proposal-object-rest-spread

1.3 第三步: babel配置

.babelrc的基本配置:

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

1.4 第四步: webpack配置

webpack.config.ts基本配置:

module: {
  rules: [
      {
        test: /.(ts|js)?$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
  ],
}

1.5 第五步: 基本测试

启动测试服务器, 已可正常解析.

1.6 第六步: 问题挖掘

上述步骤看似完美, 但是有一个致命的问题:

对于ts的类型诊断error, webpack并不会抛出异常.

而我们使用ts的目的不就是为了:

• 代码提示跳转
• 类型检测

所以, 这个问题还是值得解决的, 放到下一区块记录:

二、附加配置

接着上一小节说的, babel只负责ts的解析转换, 并不会做对应的类型检查, 所以需要自行构建.

2.1 第一步: tsconfig.json配置

在原tsconfig.json中新增下列配置项:

{
  "compilerOptions": {
+    "allowJs": true,
+    "target": "esnext",
+    "noEmit": true
  }
}

2.2 第二步: package.json配置

原package.json的scripts字段中新增:

"scripts": {
+    "check": "tsc -w"
  },

三、测试

3.1 第一步: 开启ts类型检查

npm run check

3.2 第二步: 启动开发服务器

npm run dev

四、Q&A

Q: 上述步骤需要开启至少两个终端, 一个用于 类型检查, 另一个用于 开发服务器, 是否有更优的解决方案?

A: 可参考下一条问题

Q: 在检测到ts类型错误时, webpack的构建并不会抛出异常?

A: 刚好遇到了这个问题, 参考该issue, 找到fork-ts-checker-webpack-plugin插件, 引入即可.

Q: 在ts文件发生变动时, fork-ts-checker-webpack-plugin无法即时反应类型检查的情况(只触发一次)?

A: 已知的issue

五、拓展阅读

• webpack构建ts开发环境汇总篇
• 使用ts编写webpack.config.js?
• 我想通过script标签引入插件?
• ts-loader完美替代方案
• 集成jest单测?

六、有疑惑?

如果构建的过程有任何疑惑, 可以加我的扣: 1766083035