生产构建时如何禁止$符号被用作变量或函数名

问题根源 #

生产构建流程中的代码压缩混淆环节，会默认将局部函数、变量重命名为尽可能短的单字符来缩减产物体积。$是合法的JavaScript标识符，会被压缩工具优先选中作为短命名，和jQuery全局占用的$产生命名冲突就会触发报错。你给出的构建产物中function $(e,t){e.value=t==null?"":t}就是典型的压缩生成的冲突命名。

通用配置逻辑 #

所有JS压缩工具都提供了「重命名保留字符列表」配置项，只需要把$加入这个列表，就能禁止压缩工具把任何自定义变量、函数重命名为$，从根源上避免和jQuery的冲突。

常见构建工具具体配置 #

使用Terser作为压缩器的项目（Webpack 4+、Vite自定义terser压缩、Rollup插件terser通用） #

在Terser配置的mangle节点下添加reserved字段：

terserOptions: {
  mangle: {
    reserved: ['$']
  }
}

• Vite项目：将上述配置写入vite.config.js中build.terserOptions节点，注意需要先把build.minify设置为'terser'
• Webpack项目：将上述配置写入optimization.minimizer数组内的TerserPlugin实例配置中
• Rollup项目：将上述配置传入rollup-plugin-terser插件的参数即可

使用esbuild作为压缩器的项目 #

esbuild直接在根配置下添加reserved字段：

// 配置片段
{
  minify: true,
  reserved: ['$']
}

Vite默认使用esbuild做生产压缩的场景，直接把reserved: ['$']写到build.esbuild配置节点下即可生效。

老项目使用UglifyJS压缩的场景 #

配置逻辑和Terser完全一致：

{
  mangle: {
    reserved: ['$']
  }
}

注意：该配置仅限制压缩工具生成新重命名时不使用$，不会影响源码中手动编写的$引用，也不会干扰外部引入的jQuery对全局$的使用。配置完成后重新执行生产构建，产物中就不会出现自定义的$命名函数/变量。

内容的提问来源于stack exchange，提问作者Mimoid