在 Angular 中，我们可以使用装饰器来增强类、属性和方法。但是在一些情况下，我们需要在编译时移除这些装饰器，从而最小化代码的大小，提高应用程序的性能。这时，我们可以使用 npm 包 ngtools-skip-remove-decorators。
安装
你可以通过以下命令来安装这个 npm 包：
npm install ngtools-skip-remove-decorators --save-dev
使用
我们可以通过插入一个 babel-plugin 的方式来使用 ngtools-skip-remove-decorators。我们先需要在 tsconfig.json 中设置 downlevelIteration 和 experimentalDecorators：
{
"compilerOptions": {
"downlevelIteration": true,
"experimentalDecorators": true
}
}然后，在项目中安装 @babel/core 和 @babel/plugin-proposal-decorators：
npm install @babel/core @babel/plugin-proposal-decorators --save-dev
安装完毕后，在 .babelrc 文件中添加以下配置：
-- -------------------- ---- -------
-
---------- -
-
------------------------------------
-
--------- ----
-
--
--------------------------------
-
-如果你使用的是 webpack，可以在 webpack.config.js 中添加以下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- -----------
---- -
-
------- ---------------
-------- -
-------- ----------------------------------
-
-
-
-
-
-
-示例
为了演示如何使用 ngtools-skip-remove-decorators，我们创建一个示例，假设我们有一个 Angular 组件：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ------------
--------- -
------ ---------- -------
-
--
------ ----- -------------- -
-------- ----- -------
---------- -
------ ------- ---------------
-
-我们想要移除 @Input() 装饰器，以减小代码的大小。我们可以在 .babelrc 中添加以下配置：
-- -------------------- ---- -------
-
---------- -
-
------------------------------------
-
--------- ----
-
--
-
---------------------------------
-
------------------- -
-
------- -------
-
-
-
-
-
-完成后，我们可以看到 @Input() 装饰器已经被移除了。
总结
在一些情况下，我们需要在编译时移除装饰器，以减小代码的大小并提高应用程序的性能。使用 npm 包 ngtools-skip-remove-decorators，我们可以轻松地完成这个任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672663660cf7123b364f2