使用@babel/preset-typescript取代awesome-typescript-loader和ts-loader

更新日期: 2019-11-17阅读: 2k标签: babel

前言

之前写过一篇旧react项目安装并使用TypeScript的文章在React旧项目中安装并使用TypeScript的实践

博客里使用awesome-typescript-loader对Typescript代码进行检测和转换。

而这几天又修改了一下自己的脚手架,使用@babel/preset-typescript来处理Typescript。


回顾awesome-typescript-loader方案

谈@babel/preset-typescript的优越性之前,还是先说下awesome-typescript-loader方案是如何对TypeScript进行处理的。

首先我们需要知道TypeScript是一个将TypeScript转换为指定版本JS代码的编译器,而Babel同样是一个将新版本JS新语法转换为低版本JS代码的编译器。

所以我们之前的方案每次修改了一点代码,都会将TS代码传递给TypeScript转换为JS,然后再将这份JS代码传递给Babel转换为低版本JS代码。

因此我们需要配置两个编译器,并且每次做了一点更改,都会经过两次编译。


@babel/preset-typescript方案

介绍这个方案之前,我需要列出我参考的一篇译文:[译] TypeScript 和 Babel:一场美丽的婚姻

这里提到这是 TypeScript 和 Babel 团队长达一年的官方合作成果,所以至少我们不用担心这是个野生方案会烂尾。

核心提炼一下:@babel/preset-typescript和@babel/preset-react类似,是将特殊的语法转换为JS。

但是有点区别的是,@babel/preset-typescript是直接移除TypeScript,转为JS,这使得它的编译速度飞快。

并且只需要管理Babel一个编译器就行了,因为我将脚手架中的typescript库卸载后,依然可以完美运行。

而且重要的是你写的TypeScript不会再进行类型检测,使得你改动代码后中断运行的页面。


所以,检测呢?

我写TypeScript就是用来搞类型检测的啊,你安装了TypeScript,写了TS代码然后再用@babel/preset-typescript移除不是多此一举吗?

不,并不是多此一举。

还记得前面那篇译文吗?

它的方案是使用ESLint,用@typescript-eslint配置ESLint来达到检测的目的。

而我们的方案呢?

我们是高贵的VSCode玩家,咱们自带TS检测,所以这一步咱们可以略过。


一些缺陷

上方译文中提到了此方案的以下四个缺陷:

Namespace语法不推荐,改用标准的 ES6 module(import/export)。不支持x 语法转换类型,改用x as newtype。const 枚举历史遗留风格的 import/export 语法。比如:import foo = require(...) 和 export = foo。

第1条和第4条不用,而且已经过时了。
第2条缺陷改一下语法就好了,这个语法会直接提示语法报错,很好改,问题不大。
第3条缺陷已经没有了,亲测可用。


替换步骤

要使用@babel/preset-typescript,务必确保你是Babel7+。

如果不是Babel7+用户,可以考虑运行下面的两条命令升级:

npm install babel-upgrade -g

babel-upgrade --write

然后我们安装:

npm i --save @babel/preset-typescript

然后将之前在webpack中配置解析tsx的部分去掉,改为:

module: {
  rules: [
    //...
    {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        presets: [
          '@babel/preset-env',
          '@babel/preset-react',
          '@babel/preset-typescript'
        ]
      }
    }
    //...
  ]
}

Ant Design的按需加载

必须要把这个东西单独拎出来说,太坑了。

之前的方案咱们使用的是ts-import-plugin来处理的。

所以下意识我觉得这个地方会很麻烦,网上搜各种方案。

然而必然是没有答案的,要么就是ts-import-plugin,要么就是和create-react-app结合在一起的那种。

实际上咱们只需要升级一下babel-plugin-import到最新就可以了。

我之前就是因为babel-plugin-import版本太低,导致只对js文件有效,对ts文件无效。

然后配置一下babel-plugin-import即可:

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 文件
        ],
      }
    }
    //...
  ]
}

总结

这次升级花的最多时间就在ant-design的按需加载上,其它的东西其实都很好配置,无非是知识点零散些罢了。

说实话很感谢那篇译文,但是读起来还是觉得有点生硬。

所以另外一个花时间的点,就是如何有条理地把为什么升级阐述清楚。

这里再附上参考项目:脚手架项目

作者:韩子卢 
出处:https://www.cnblogs.com/vvjiang/ 


链接: https://www.fly63.com/article/detial/6900

Babel中的stage-0,stage-1,stage-2以及stage-3的作用(转)

大家知道,将ES6代码编译为ES5时,我们常用到Babel这个编译工具。大家参考一些网上的文章或者官方文档,里面常会建议大家在.babelrc中输入如下代码

深入理解Babel原理及其使用,babel把ES6转成ES5的原理是什么?

文的babel使用场景局限于babel配合webpack来转译输出es5的js代码,babel的命令行、以代码形式调用或node环境下这些统统都不会涉及。Babel使用的难点主要在于理解polyfill、runtime和core-js。

ES6之Babel的各种坑总结【转载】

自从 Babel 由版本5升级到版本6后,在安装和使用方式上与之前大相径庭,于是写了这篇入坑须知,以免被新版本所坑。坑一本地安装和全局安装 、坑二编译插件、坑三babel-polyfill插件

babel-preset-env:一个帮你配置babel的preset

babel-preset-env 一个帮你配置babel的preset,根据配置的目标环境自动采用需要的babel插件。babel-preset-env 功能类似 babel-preset-latest,优点是它会根据目标环境选择不支持的新特性来转译

babel-polyfill使用与性能优化

本文主要内容包括:什么是babel-polyfill,如何使用,如何通过按需加载进行性能优化。babel只负责语法转换,比如将ES6的语法转换成ES5。但如果有些对象、方法,浏览器本身不支持,此时需要引入babel-polyfill来模拟实现这些对象、方法。

babel的初步了解

由于现在前端出现了很多非es5的语法,如jsx,.vue,ts等等的格式和写法。babel其实是一个解释器,它主要讲进行中的代码分为三个阶段执行:解释,转换,生成。

深入类和继承内部原理+Babel和 TypeScript 之间转换

在 JavaScript 中,没有基本类型,创建的所有东西都是对象。例如,创建一个新字符串,与其他语言不同,在 JavaScript 中,字符串或数字的声明会自动创建一个封装值的对象,并提供不同的方法,甚至可以在基本类型上执行这些方法。

使用 Webpack 与 Babel 配置 ES6 开发环境

在项目根目录下新建一个配置文件—— webpack.config.js 文件:执行编译打包命令,完成后打开 bundle.js 文件发现 isNull 和 unique 两个函数没有被编译,和 webpack 官方说法一致:webpack 默认支持 ES6 模块语法,要编译 ES6 代码依然需要 babel 编译器。

Babel_如何写一个Babel插件

Babel对代码进行转换,会将JS代码转换为AST抽象语法树(解析),对树进行静态分析(转换),然后再将语法树转换为JS代码(生成)。每一层树被称为节点。每一层节点都会有type属性,用来描述节点的类型。其他属性用来进一步描述节点的类型。

初学 Babel 工作原理

Babel 对于前端开发者来说应该是很熟悉了,日常开发中基本上是离不开它的。我们已经能够熟练地使用 es2015+ 的语法。但是对于浏览器来说,可能和它们还不够熟悉,我们得让浏览器理解它们,这就需要 Babel

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!