本文将展示&＃xff0c;如何使用 &＃64;babel/preset-typescript 和 &＃64;babel/preset-env 配置一个最小但完整的编译环境&＃xff0c;打包工具使用 webpack&＃64;4.41.2
插件集 preset-typescript
preset-typescript 是 Babel 提供的预设插件集之一&＃xff0c;Babel 官方对其有一篇简短的介绍&＃xff1a;
https://babeljs.io/docs/en/babel-preset-typescript
其中仅包含插件&＃xff1a;&＃64;babel/plugin-transform-typescript
顾名思义&＃xff0c;它的作用是转换 TypeScript 代码。
插件集 preset-env
preset-env 也是 Babel 提供的预设插件集之一&＃xff0c;它可以将 ES6 转换为 ES5。preset-env 对于插件的选择是基于某些开源项目的&＃xff0c;比如 browserslist、compat-table 以及 electron-to-chromium。我们常用 .browserslistrc 来设置我们预想满足的目标运行环境&＃xff0c;如&＃xff1a;
这里不详细展开 browserslist 的使用&＃xff0c;有时间会专门写一篇文章。我现在要详细说的是 preset-env 的重要配置之一&＃xff1a;useBuiltIns。
useBuiltIns 从其名字来说是“使用内置”&＃xff0c;“内置”的什么呢&＃xff1f;从官方看来是“polyfills”。它的取值可以是以下三种&＃xff1a;
1&＃xff09; false&＃xff1a;
不使用内置的“polyfills”&＃xff0c;这意味着你需要自行解决必要的“polyfills”问题。
2&＃xff09; "entry"&＃xff1a;
只在“入口模块”处导入“polyfills”&＃xff0c;你需要“根模块”写上import "core-js" 和 import "regenerator-runtime/runtime"&＃xff0c;babel 会自动展开全部必要模块导入import "core-js/modules/X"&＃xff0c;X 是根据你配置的目标环境选择出来的 polyfill&＃xff0c;如es.string.pad-start、es.array.unscopables.flat。注意&＃xff0c;如果你没有写import "core-js"&＃xff0c;则不会展开任何导入&＃xff08;import&＃xff09;语句。
3&＃xff09; "usage"&＃xff1a;
你不用写什么了&＃xff0c;babel 会根据你配置的目标环境&＃xff0c;在你使用到一些“ES6特性X”的时候&＃xff0c;自动补充import "core-js/modules/X"。我觉得这是比较棒的选择&＃xff01;
另一个选项 corejs&＃xff0c;指定的是使用的 corejs 的版本&＃xff0c;corejs 需要你自己安装&＃xff1a;
或者
corejs 只在 useBuiltIns 取值为 “entry” 或 “usage” 的时候有用&＃xff0c;因为 Babel 所谓内置的 polyfills 工具就是 corejs。corejs 可以配置为 2 或 3。
安装 Babel 基础
有 5 个包需要下载安装&＃xff0c;它们分别是&＃xff1a;
- &＃64;babel/core
- &＃64;babel/preset-env
- &＃64;babel/preset-typescript
- &＃64;babel/plugin-proposal-class-properties
- &＃64;babel/plugin-proposal-object-rest-spread
其中包含了 2 个插件 plugin-proposal-class-properties 和 plugin-proposal-object-rest-spread&＃xff0c;分别用于转换语法特性“类属性”、“对象展开”&＃xff0c;二者均处于“提议”阶段。
三步配置 babel
首先&＃xff0c;在项目的根目录创建文件 .babelrc&＃xff0c;写入下面的内容&＃xff1a;
{"presets": [["&＃64;babel/env",{"useBuiltIns": "usage","corejs": {"version": 3,"proposals": true // 使用尚在“提议”阶段特性的 polyfill}}],"&＃64;babel/typescript"],"plugins": ["&＃64;babel/proposal-class-properties","&＃64;babel/proposal-object-rest-spread"]
}
然后&＃xff0c;创建 .browserlistrc 文件&＃xff0c;配置目标环境&＃xff1a;
最后&＃xff0c;创建 tsconfig.json 文件&＃xff0c;配置 TypeScript 编译器&＃xff1a;
{"compilerOptions": {// Target latest version of ECMAScript."target": "esnext",// Search under node_modules for non-relative imports."moduleResolution": "node",// Process & infer types from .js files."allowJs": true,// Don&＃39;t emit; allow Babel to transform files."noEmit": true,// Enable strictest settings like strictNullChecks & noImplicitAny."strict": true,// Disallow features that require cross-file information for emit."isolatedModules": true,// Import non-ES modules as default imports."esModuleInterop": true},"include": ["src"]
}
安装 babel-cli 以执行编译
为了执行编译&＃xff0c;你可以安装 cli&＃xff1a;
并在package.json 文件的 scripts 字段中加上命令&＃xff1a;"compile": "babel src --out-dir lib --extensions ".ts""。
在终端执行命令&＃xff1a;
集成 webpack
现在加入 webpack 打包工具&＃xff0c;首先安装它&＃xff1a;
配置 webpack&＃xff0c;在项目根目录创建 webpack.config.js&＃xff1a;
const path &＃61; require("path")module.exports &＃61; {mode: "production",entry: "./src/index.ts",output: {path: path.resolve("./www/dist"),filename: "[name].bundle.js",chunkFilename: "[name].chunk.[chunkhash:7].js"},resolve: {extensions: [".ts", ".js"],},module: {rules: [{test: /.ts$/,use: "babel-loader"}]}
}
编写执行 webpack 的脚本&＃xff0c;创建 scripts.js&＃xff1a;
const webpack &＃61; require("webpack")
const config &＃61; require(&＃96;./webpack.config&＃96;)const compiler &＃61; webpack(config)
compiler.run((err, stat) &＃61;> {if (err) throw errconsole.log(stat.toString({colors: true}))
})
在 package.json 文件中加入命令&＃xff1a;"pack": "node scripts.js"
执行打包&＃xff1a;npm run pack
区别 runtime 和 polyfills
为了性能&＃xff0c;Babel 官方建议使用插件 &＃64;babel/plugin-transform-runtime。这个插件有什么作用呢&＃xff1f;
1&＃xff09;不使用 plugin-transform-runtime
提供如下 TypeScript 脚本内容&＃xff1a;
class Staff {name: string &＃61; "Singhi"say() {console.log(&＃96;I am ${this.name}&＃96;)}
}
Babel 转换后的代码如下&＃xff1a;
"use strict";require("core-js/modules/es.function.name");Object.defineProperty(exports, "__esModule", {value: true
});function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }function _defineProperties(target, props) { for (var i &＃61; 0; i /*#__PURE__*/
function () {function Animal() {_classCallCheck(this, Animal);_defineProperty(this, "name", "Singhi");}_createClass(Animal, [{key: "say",value: function say() {console.log("I am ".concat(this.name));}}]);return Animal;
}();
可以看到 Babel 为我们插入了很多的函数&＃xff1a;
- _classCallCheck
- _defineProperties
- _createClass
- _defineProperty
它们都是用来创建类Animal的&＃xff0c;我们的类Animal被转换了。需要注意&＃xff0c;Babel 会为每个模块&＃xff08;js 文件&＃xff09;写入这样一段内容&＃xff0c;如果我们有 1000 个模块&＃xff0c;那么就会有 1000 段这样的“东西”&＃xff0c;这是内容上的重复。为了复用&＃xff0c;Babel 允许我们配置这个插件。
2&＃xff09;使用 plugin-transform-runtime
配置如下&＃xff1a;
"plugins": ["&＃64;babel/plugin-transform-runtime",// ...
]
我们来看看配置后的输出&＃xff1a;
...var _classCallCheck2 &＃61; _interopRequireDefault(require("&＃64;babel/runtime/helpers/classCallCheck"));var _createClass2 &＃61; _interopRequireDefault(require("&＃64;babel/runtime/helpers/createClass"));var _defineProperty2 &＃61; _interopRequireDefault(require("&＃64;babel/runtime/helpers/defineProperty"));...
可以看出来&＃xff0c;Babel 从 &＃64;babel/runtime/helpers 中引入了一些工具&＃xff0c;并经过_interopRequireDefault处理赋值给局部变量。这里的 &＃64;babel/runtime 包是需要额外安装的&＃xff1a;
npm i -S &＃64;babel/runtime
&＃64;babel/runtime 为我们提供了一些额外的函数&＃xff0c;以辅助语言的降级转换。而 plugin-transform-runtime 插件则基于 &＃64;babel/runtime 避免了内容上的重复&＃xff0c;从而减小了程序包的体积。
与&＃64;babel/runtime不同&＃xff0c;polyfills 用于提供 API&＃xff0c;如 Array.from、String.prototype.split 等。我们可以在 preset-env 下配置 polyfills&＃xff0c;corejs 是 Babel 使用的内置 polyfills 库。
默认&＃xff0c;polyfills 会写入全局环境&＃xff0c;插件 plugin-transform-runtime 提供了“隔离”能力&＃xff0c;你只需修改一下默认配置&＃xff1a;corejs: 3 或者 corejs: 2。配置项corejs默认为false&＃xff0c;也就是不管 polyfills 那部分工作。但corejs 被设置为2或3的时候&＃xff0c;你需要额外安装&＃xff1a;
npm i -S &＃64;babel/runtime-corejs2
或&＃xff1a;
npm i -S &＃64;babel/runtime-corejs3
并且将 preset-env 的配置项 useBuiltIns 设置为false&＃xff0c;否则就重复了。
假如我们的代码使用了Promise&＃xff0c;Babel 会生成以下内容&＃xff1a;
require("&＃64;babel/runtime-corejs3/core-js-stable/promise")
你可能会疑惑&＃xff0c;当我们未安装包 &＃64;babel/runtime 的时候&＃xff0c;Babel 从哪里获得 helpers&＃xff1f;这个问题参考我在 github 上的一个提问&＃xff1a;
https://github.com/babel/babel/issues/10984#issuecomment-573347933
维护者 nicolo-ribaudo 给出了回答&＃xff1a;
综上
有了 &＃64;babel/preset-typescript &＃xff0c;配置 TypeScript 环境确实方便了很多。需要注意的是&＃xff0c;&＃64;babel/preset-typescript 只做语法转换&＃xff0c;不做类型检查&＃xff0c;因为类型检查的任务可以交给 IDE &＃xff08;或者用 tsc&＃xff09;去做。另外&＃xff0c;Babel 负责两件事&＃xff1a;1&＃xff09;语法转换&＃xff0c;由各种 transform 插件、helpers 完成&＃xff1b;2&＃xff09;对于可 polyfill 的 API 的提供&＃xff0c;由 corejs 实现。&＃64;babel/plugin-transform-runtime 插件可用于减少生成代码的量&＃xff0c;以及对 corejs 提供的 API 与 runtime 提供的帮助函数&＃xff08;helpers&＃xff09;进行模块隔离。
本人博客地址&＃xff1a;https://www.zhangxinghai.cn
欢迎访问&＃xff01;
京公网安备 11010802041100号