npm 包 terser-folder 使用教程

前言

在前端开发过程中，我们经常需要对 JavaScript 代码进行压缩，以减少文件大小，提升页面加载速度。而为了方便地处理多个文件，我们可以使用一个名叫 terser-folder 的 npm 包。

本文将详细介绍如何使用 terser-folder 包对一个文件夹内的所有 JavaScript 文件进行压缩。

安装

在使用 terser-folder 之前，我们需要先安装该包。可以使用 npm 进行安装，命令如下：

npm install terser-folder --save-dev

使用

安装完毕后，我们就可以使用 terser-folder 进行 JavaScript 文件的压缩了。

1. 在项目的根目录下新建一个名为 scripts 的文件夹，用于存放需要压缩的 JavaScript 文件。

2. 新建一个名为 index.js 的文件，用于配置 terser-folder。配置文件的代码如下：

   -- -------------------- ---- -------
   -- -- ------------- -
   ----- - ------------ - - -------------------------
   
   -- ---
   ----- ------ - -
     ------ ----------------- -- ---------
     ------- ---------------- -- ---------
   --
   
   -- -- ---------- --
   ---------------------

   配置项中的 input 表示需要压缩的文件路径，这里使用通配符 * 表示压缩 scripts 目录下的所有 JavaScript 文件。output 表示压缩后的文件输出路径，这里将压缩后的文件存放到 scripts/min 目录下。可以根据实际情况进行修改。

3. 打开命令行工具，进入项目根目录，运行以下命令：

   node index.js

   运行完毕后， scripts/min 目录下就会生成与 scripts 目录下 JavaScript 文件同名的压缩后的文件。

示例

下面我们通过一个具体的示例来演示使用 terser-folder 进行 JavaScript 文件压缩的过程。

1. 在项目的根目录下新建一个名为 scripts 的文件夹，用于存放需要压缩的 JavaScript 文件。

2. 在 scripts 目录下新建两个 JavaScript 文件，分别为 a.js 和 b.js：

   // a.js
   function foo() {
     console.log("Hello, Terser Folder!");
   }
   
   foo();

   // b.js
   function bar() {
     console.log("This is Terser Folder");
   }
   
   bar();

3. 新建一个名为 index.js 的文件，用于配置 terser-folder。配置文件的代码如下：

   -- -------------------- ---- -------
   -- -- ------------- -
   ----- - ------------ - - -------------------------
   
   -- ---
   ----- ------ - -
     ------ ----------------- -- ---------
     ------- ---------------- -- ---------
   --
   
   -- -- ---------- --
   ---------------------

   配置项中的 input 表示需要压缩的文件路径，这里使用通配符 * 表示压缩 scripts 目录下的所有 JavaScript 文件。output 表示压缩后的文件输出路径，这里将压缩后的文件存放到 scripts/min 目录下。可以根据实际情况进行修改。

4. 打开命令行工具，进入项目根目录，运行以下命令：

   node index.js

   运行完毕后， scripts/min 目录下就会生成与 scripts 目录下 JavaScript 文件同名的压缩后的文件。

5. 打开 scripts/min 目录，可以看到生成了两个压缩后的 JavaScript 文件，分别为 a.js 和 b.js：

   // a.js
   function foo(){console.log("Hello, Terser Folder!")}foo();

   // b.js
   function bar(){console.log("This is Terser Folder")}bar();

总结

在前端开发中，压缩 JavaScript 文件是非常常见的工作。使用 terser-folder 可以方便地处理多个文件，减少工作量。通过本文介绍的使用方法，相信大家已经能够轻松应对各种 JavaScript 文件的压缩工作了。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/191960