在前端开发中，我们经常需要使用一些框架、库或插件来提高效率和质量。其中，npm 这个包管理工具是不得不提的一种。而 rollup-plugin-strip-code 则是一个非常实用的 npm 包，可以用于在 Rollup 打包时去除不需要的代码。
什么是 Rollup？
先介绍一下 Rollup，它是一款 JavaScript 模块打包器，通过树摇（tree-shaking）技术可大幅度减小打包后的文件体积，提高网站性能。与 Webpack 不同的是，Rollup 更适合用于打包库（library）或工具，因为它的作用是将代码尽可能地压缩，而不是将它们打包在一起。
Rollup 目前较为流行的应用场景包括：打包 React 组件、打包 Vue 组件、打包公共 JavaScript 库等。
rollup-plugin-strip-code 是什么？
rollup-plugin-strip-code 是一个 Rollup 的插件，专门用于去除 JavaScript 代码中的特定部分。通过这个插件，我们可以去除代码中的注释、调试代码、日志输出等非必要部分，从而减小打包后的文件体积。
安装和使用
安装
使用 npm 进行安装：
--- ------- ------------------------ ----------
在 Rollup 中使用
在使用 Rollup 打包时，我们需要在配置文件中加入该插件的相关配置，如下所示：
-- ----------------
------ - ------ - ---- ---------
------ ----- ---- ---------------------------
------ ------- -
------ ---------------
--------- -----------
-------- -
-------
-------- ------------------------
---
--
------- -
-
----- --------------
------- ------
--
--
--在上面的代码中，我们首先导入了 rollup 和 rollup-plugin-strip-code，然后在配置文件中配置了插件，通过 pattern 属性指定了需要去除的代码部分（这里使用正则表达式去除所有的 console.log 输出）。最后输出到 dist/app.js 中。
需要注意的是，external 属性用于指定需要外部加载的依赖，即不需要被打包的第三方库。在上述代码中，我们用了一个名为 jquery 的库，因此需要将其加入 external 列表中。
示例代码
下面我们编写一个简单的示例，演示如何使用 rollup-plugin-strip-code：
-- ------------ -- ----------- -------- -------- - ----------------- - ------ -------- ------ -- - -- -- - - - -------- --------- ---- - ------- ----- ------ - - - -- -------------- - - ------ -------- ------ ------- - ------ -------- -------- -- - -- -- - - - -------- --------- ---- - ------- ----- ------ - - - -- -------------- - - ------ -------- ------ ------- - -- ----------- -- -- ------------ ----------- ------ - ---- ----- - ---- ---------- ------ --- -------- ---
上面的示例代码中，我们定义了两个函数 add 和 minus，分别用于计算两个数的加法和减法，并输出日志。在 src/main.js 文件中，我们引入这两个函数进行测试。
接下来，我们需要在 Rollup 配置文件中，使用 rollup-plugin-strip-code 去除掉这些日志输出部分。修改 rollup.config.js 文件：
------ - ------ - ---- ---------
------ ----- ---- ---------------------------
------ ------- -
------ --------------
--------- -----------
-------- -
-------
-------- ---------------
---
--
------- -
-
----- --------------
------- ------
--
--
--在配置文件中，我们引入了 rollup-plugin-strip-code，然后通过 pattern 属性使用正则表达式去除代码中的 log 输出。
最后使用 Rollup 打包代码：
------ --
运行后，我们可以在 dist/app.js 文件中看到去除掉了 log 相关代码的结果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedab7fb5cbfe1ea06107ad