介绍
typescript-polyfills-generator 是一个能够为 TypeScript 项目生成 polyfills 的工具。这个工具会生成类似于 core-js 的 polyfill 代码，可以通过打包工具打入到你的应用中。
安装
首先，你需要安装 typescript-polyfills-generator：
npm install typescript-polyfills-generator --save-dev
然后，你需要在你的 TypeScript 配置文件中添加两个属性 lib 和 types。例如，如果你的 tsconfig.json 是这样的：
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- -----------
------------ ----
--
---------- -------------
---------- ---------------- ---------------
-你需要把它修改为：
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- -----------
------------ -----
------ ------- -------
-------- --------
--
---------- -------------
---------- ---------------- ---------------
-这样，你就可以在你的项目中使用 typescript-polyfills-generator 了。
使用
typescript-polyfills-generator 提供一个 CLI，可以通过命令行调用。例：
./node_modules/.bin/typescript-polyfills-generator corejs3 > src/polyfills.ts
这个命令会在 src/polyfills.ts 中生成 core-js@3 的 polyfill 代码。
参数
typescript-polyfills-generator 支持一些参数来定制生成的 polyfills。
--corejs <version>
指定需要生成的 core-js 的版本。例如：
./node_modules/.bin/typescript-polyfills-generator --corejs 2 > src/polyfills.ts
--browsers <browsers>
指定需要兼容的浏览器版本。例如：
./node_modules/.bin/typescript-polyfills-generator --browsers "chrome >= 70, firefox >= 64" > src/polyfills.ts
--targets <targets>
指定需要兼容的平台。例如：
./node_modules/.bin/typescript-polyfills-generator --targets "chrome58, ie11" > src/polyfills.ts
你还可以通过配置文件来指定参数：
{
"corejs": 3,
"browsers": "chrome >= 70, firefox >= 64",
"targets": "chrome58, ie11"
}然后，在命令行中执行：
./node_modules/.bin/typescript-polyfills-generator --config config.json > src/polyfills.ts
示例代码
一个使用 typescript-polyfills-generator 生成 polyfill 代码的示例：
import "core-js/proposals/reflect-metadata";
class ExampleClass {
@Reflect.metadata("key", "value")
exampleMethod() {
// do something
}
}这个示例中，我们使用了 Reflect API，而 Reflect API 并不是所有浏览器都支持的，所以我们需要使用 polyfill 来填充这个功能的缺失。
使用 typescript-polyfills-generator 生成的 polyfill 代码如下：
-- -------------------- ---- ------- ------ --------------------------------------------- ------ --------------------------------------------- ------ --------------------------------- ------ --------------------------------------------------------- ------ ---------------------------------------------- ------ --------------------------------- ------ ------------------------------------------- ------ -------------------------------------- ------ ------------------------------------------------ ------ --------------------------------- ------ ---------------------------------------------- ------ ----------------------------------- ------ --------------------------------------- ------ ------------------------------------------------- ------ ------------------------------------------------- ------ ---------------------------------------------- ------ --------------------------------------------------- ------ -------------------------------------------------- ------ ------------------------------------------------------- ------ ---------------------------------------------- ------ -------------------------------------------------- ------ ------------------------------------------
这些代码中包含了 Reflect API 的所有功能，可以正常运行在大多数浏览器中。
结论
typescript-polyfills-generator 是一个非常方便的工具，它可以帮助开发者为自己的 TypeScript 项目生成 polyfills，使项目能够正常运行在大多数浏览器上。它支持多种定制选项，可以满足不同项目的需求。如果你正在开发一个 TypeScript 项目，并且需要使用一些浏览器不支持的功能，那么 typescript-polyfills-generator 一定是你的首选。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a630d09270238224c5