使用@babel/preset-typescript取代awesome-typescript-loader和ts-loader
<h2 id="前言">前言</h2><p>之前写过一篇旧React项目安装并使用TypeScript的文章：在React旧项目中安装并使用TypeScript的实践。</p>
<p>博客里使用awesome-typescript-loader对Typescript代码进行检测和转换。</p>
<p>而这几天又修改了一下自己的脚手架，使用@babel/preset-typescript来处理Typescript。</p>
<h2 id="回顾awesome-typescript-loader方案">回顾awesome-typescript-loader方案</h2>
<p>谈@babel/preset-typescript的优越性之前，还是先说下awesome-typescript-loader方案是如何对TypeScript进行处理的。</p>
<p>首先我们需要知道TypeScript是一个将TypeScript转换为指定版本JS代码的编译器，而Babel同样是一个将新版本JS新语法转换为低版本JS代码的编译器。</p>
<p>所以我们之前的方案每次修改了一点代码，都会将TS代码传递给TypeScript转换为JS，然后再将这份JS代码传递给Babel转换为低版本JS代码。</p>
<p>因此我们需要配置两个编译器，并且每次做了一点更改，都会经过两次编译。</p>
<h2 id="babelpreset-typescript方案">@babel/preset-typescript方案</h2>
<p>介绍这个方案之前，我需要列出我参考的一篇译文：[译] TypeScript 和 Babel：一场美丽的婚姻。</p>
<p>这里提到这是 TypeScript 和 Babel 团队长达一年的官方合作成果，所以至少我们不用担心这是个野生方案会烂尾。</p>
<p>核心提炼一下：@babel/preset-typescript和@babel/preset-react类似，是将特殊的语法转换为JS。</p>
<p>但是有点区别的是，@babel/preset-typescript是直接移除TypeScript，转为JS，这使得它的编译速度飞快。</p>
<p>并且只需要管理Babel一个编译器就行了，因为我将脚手架中的typescript库卸载后，依然可以完美运行。</p>
<p>而且重要的是你写的TypeScript不会再进行类型检测，使得你改动代码后中断运行的页面。</p>
<h2 id="所以检测呢">所以，检测呢？</h2>
<p>我写TypeScript就是用来搞类型检测的啊，你安装了TypeScript，写了TS代码然后再用@babel/preset-typescript移除不是多此一举吗？</p>
<p>不，并不是多此一举。</p>
<p>还记得前面那篇译文吗？</p>
<p>它的方案是使用ESLint，用@typescript-eslint配置ESLint来达到检测的目的。</p>
<p>而我们的方案呢？</p>
<p>我们是高贵的VSCode玩家，咱们自带TS检测，所以这一步咱们可以略过。</p>
<h2 id="一些缺陷">一些缺陷</h2>
<p>上方译文中提到了此方案的以下四个缺陷：</p>
<ol>
<li>Namespace语法不推荐，改用标准的 ES6 module（import/export）。</li>
<li>不支持<newtype>x 语法转换类型，改用x as newtype。</newtype></li>
<li>const 枚举</li>
<li>历史遗留风格的 import/export 语法。比如：import foo = require(...) 和 export = foo。</li>
</ol>
<p>第1条和第4条不用，而且已经过时了。<br>
第2条缺陷改一下语法就好了，这个语法会直接提示语法报错，很好改，问题不大。<br>
第3条缺陷已经没有了，亲测可用。</p>
<h2 id="替换步骤">替换步骤</h2>
<p>要使用@babel/preset-typescript，务必确保你是Babel7+。</p>
<p>如果不是Babel7+用户，可以考虑运行下面的两条命令升级：</p>
<pre><code>npm install babel-upgrade -g
babel-upgrade --write
</code></pre>
<p>然后我们安装：</p>
<pre><code>npm i --save @babel/preset-typescript
</code></pre>
<p>然后将之前在webpack中配置解析tsx的部分去掉，改为：</p>
<pre><code>module: {
rules: [
//...
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript'
]
}
}
//...
]
}
</code></pre>
<h2 id="ant-design的按需加载">Ant Design的按需加载</h2>
<p>必须要把这个东西单独拎出来说，太坑了。</p>
<p>之前的方案咱们使用的是ts-import-plugin来处理的。</p>
<p>所以下意识我觉得这个地方会很麻烦，网上搜各种方案。</p>
<p>然而必然是没有答案的，要么就是ts-import-plugin，要么就是和create-react-app结合在一起的那种。</p>
<p>实际上咱们只需要升级一下babel-plugin-import到最新就可以了。</p>
<p>我之前就是因为babel-plugin-import版本太低，导致只对js文件有效，对ts文件无效。</p>
<p>然后配置一下babel-plugin-import即可：</p>
<pre><code>module: {
rules: [
//...
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript'
],
plugins: [
['import', { libraryName: 'antd', style: 'css' }], // `style: true` 会加载 less 文件
],
}
}
//...
]
}
</code></pre>
<h2 id="总结">总结</h2>
<p>这次升级花的最多时间就在ant-design的按需加载上，其它的东西其实都很好配置，无非是知识点零散些罢了。</p>
<p>说实话很感谢那篇译文，但是读起来还是觉得有点生硬。</p>
<p>所以另外一个花时间的点，就是如何有条理地把为什么升级阐述清楚。</p>
<p>这里再附上参考项目：脚手架项目。</p>
</div>
<div id="MySignature" role="contentinfo">
作者：韩子卢
<br/>
出处：https://www.cnblogs.com/vvjiang/
<br/>
本博客文章均为作者原创，转载请注明作者和原文链接。<br><br>
来源：https://www.cnblogs.com/vvjiang/p/12057811.html
頁:
[1]