更新

[2019-5-9]

Added

• Initial release

0、媒介

因为最近在重写个人的原生ts插件项目, 遇到了集成jest单测的需求, 纯真地运用ts-jest + ts-loader会涌现没法计算的毛病, 所以决议运用babel, 圆满摒弃了传统的ts-loader计划, 关于重要流程纪录下.

项目地点:
ts-utility-plugins

同时也迎接ts新手和想提拔的你, 介入到项目中来, 概况可浏览Wiki

一、基础设置

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"
  },

三、测试

1. 开启ts范例搜检

npm run check

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

五、拓展浏览

六、有迷惑?

假如构建的历程有任何迷惑, 能够加我的扣: 1766083035