PyCharm 2025.2 Help

压缩 JavaScript

缩小化压缩是指移除所有不必要的字符,如空格、新行、注释,而不改变源代码的功能。 在开发和调试过程中,这些字符使代码更易读。 在生产阶段,它们只会增加需要传输的代码量。

通常情况下,压缩是在构建过程中完成的,使用像 webpack 这样的构建工具。 如果您未使用构建工具,可以使用独立工具,例如 terser

要自动压缩您的代码,您需要安装一个压缩工具并配置一个 File Watcher ,该工具将跟踪您的文件更改并运行压缩工具。

默认情况下,文件监视器范围内的 JavaScript 文件一旦被更改并保存,就会立即开始压缩。 您可以指定其他 触发工具的事件。 请了解更多有关 File Watchers的信息。

生成的压缩代码存储在一个单独的文件中,文件名为源 JavaScript 文件的名称和扩展名 min.js 。 此生成文件的位置在 要刷新的输出路径 字段中定义,位于 新观察器对话框内。 但是,在 项目树 中,包含压缩代码的文件显示在作为节点显示的源 JavaScript 文件下方。 要更改此默认显示方式,请在 项目 工具窗口 Alt+1配置文件嵌套

以下示例展示了如何直接从 PyCharm 使用 terser 压缩 JavaScript 代码。

示例:使用 terser 压缩 JavaScript

要自动压缩代码,您需要安装 terser 并配置一个 UglifyJS File Watcher ,它将跟踪文件的更改并运行该工具。

默认情况下,文件监视器范围内的 JavaScript 文件一旦被更改并保存,就会立即开始压缩。 您可以指定其他 触发 terser 的事件。 请了解更多有关 File Watchers的信息。

生成的压缩代码存储在一个单独的文件中,文件名为源 JavaScript 文件的名称和扩展名 min.js 。 此生成文件的位置在 要刷新的输出路径 字段中定义,位于 新观察器对话框内。 但是,在 项目树 中,包含压缩代码的文件显示在作为节点显示的源 JavaScript 文件下方。 要更改此默认显示方式,请在 项目 工具窗口 Alt+1配置文件嵌套

开始之前

  1. 请确保您的计算机上安装了 Node.js

  2. 请确保在设置中启用了 JavaScript 和 TypeScript 捆绑插件。 按下 Ctrl+Alt+S 打开设置,然后选择 插件。 点击 已安装 选项卡。 在搜索字段中,键入 JavaScript and TypeScript。 有关插件的更多信息,请参阅 插件管理

  3. 请确保在设置中启用了 File Watchers 捆绑插件。 按下 Ctrl+Alt+S 打开设置,然后选择 插件。 点击 已安装 选项卡。 在搜索字段中,输入 File Watchers。 有关插件的更多信息,请参阅 插件管理

安装 terser

  • 在嵌入的 终端 (Alt+F12 )中,输入:

    npm install --save-dev terser

    了解更多信息,请访问 npmjs 官方网站

创建文件监视器

  1. 设置 对话框(Ctrl+Alt+S )中,点击 文件监视器 下的 工具File Watchers 页面 显示了已配置的 File Watchers 列表。

  2. 点击 添加按钮 或按 Alt+Insert 并从列表中选择 UglifyJS 预定义模板。

    创建 UglifyJS(terser)监视器:点击添加并选择模板

    新监视器 对话框将打开。

    创建 UglifyJS(terser)监视器:具有默认设置的新监视器对话框
  3. 程序 字段中,指定 terser 可执行文件的位置。 手动输入路径或点击 并在打开的对话框中选择文件位置。

  4. 默认情况下, 范围 字段显示 项目文件。 为了避免已经压缩的文件再次压缩,请按照 定义新范围中所述配置带有 file:*js&&!file:*.min.* 模式的自定义范围。

    手动输入模式

    然后从 作用域 列表中选择新的作用域。

    选择自定义范围
  5. 如有必要,根据 文件监视器 中所述接受其他默认的文件监视器设置或重新配置它们,然后点击 确定。 PyCharm 将您带回 文件监视器 页面,新的文件监视器已添加到列表中:

    创建 UglifyJS 监视器:新的监视器已添加到列表中
  6. 请确保选中 已启用 复选框。

    默认情况下,File Watcher 将在当前项目中可用。 要在其他项目中使用它,请从 全局 列表中选择 级别

运行 terser

PyCharm 会在您更改 选定范围中的 JavaScript 文件时自动运行 terser

您可以按照 配置高级选项中所述,配置 terser在其他事件上运行。

    最后修改日期: 2025年 9月 26日