使用babel7构建完美的纯ts开发环境

Freeman 发布于2019-08-26 18:26 / 2913人阅读

摘要：更新前言由于最近在重写个人的原生插件项目遇到了集成单测的需求单纯地使用会出现难以估计的错误所以决定使用完美摒弃了传统的方案对于主要流程记录下项目地址同时也欢迎新手和想提升的你参与到项目中来详情可阅读一基本配置先通过简单的配置让

更新 [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

五、拓展阅读

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

六、有疑惑?

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110210.html

使用 TypeScript 改造构建工具及测试用例

摘要：第一个完全使用重构的纯项目已经上线并稳定运行了。测试用例的改造前边的改为大多数原因是因为强迫症所致。但是测试用例的改造则是一个能极大提高效率的操作。最近的一段时间一直在搞TypeScript，一个巨硬出品、赋予JavaScript语言静态类型和编译的语言。第一个完全使用TypeScript重构的纯Node.js项目已经上线并稳定运行了。第二个前后端的项目目前也在重构中，关于前...

Cristic 2019-08-23 11:41 评论0 收藏0
babel7 重新理解

摘要：主要功能点语法转换垫片兼容处理，通过方式在目标环境中添加缺失的特性源码转换其他使用理念主要通过插件的形式达到转换代码的目的。就是解决这个问题的。测试环境 node 10.14.1Babel 7.4.3 Babel 是什么？ Babel 是一个工具链，主要用于将 ECMAScript2015+版本的代码转换为向后兼容的 Javascript 代码，以便能够运行在当前和旧版本的浏览器或其...

avwu 2019-08-23 17:55 评论0 收藏0
基于webpack4.x, babel7.x 搭建的多页面脚手架, 简化前端开发环境配置，开箱即用，

摘要：开箱即用的多页面脚手架基于模块化开发可复用的现代化网站感兴趣的朋友，请点个及时关注项目更新请点个项目请提特性支持前后端分离开发配置完整的打包方案支持本地开发热更新集成代码风格校验支持编写源码，编译生成生产代码内置开发环境，自动加样式前缀自 Webpack-seed 开箱即用的多页面脚手架, 基于webpack4.2x babel7.1x模块化开发可复用的现代化网站(Without Vu...

junfeng777 2019-08-23 12:29 评论0 收藏0
如何搭建一个基于react、webpack4、babel7的项目（一）

摘要：对的工作流程有点模糊，以及据官方文档称的升级，性能得到了极大的提升，而还是用的，于是决定从头开始搭建一个适合团队的脚手架。保证各文件获得一致的文件编码和缩进效果。这些在后面文章中，都会一个个涉及到，此处不做详细展开。前言写前端项目这么久了，以前用的 dva 框架，后来用过 create-react-app 框架，都需要针对团队做一些定制化的修改。对 webpack 的工作流程有点模...

IamDLY 2019-08-23 12:30 评论0 收藏0