Grunt.js：处理生成的 js 文件中同名的两个函数

Question

我有这个问题： 为了重构现有项目的前端部分，我尝试在其中使用 Grunt 编译器。本项目结构如下：

file1.jsp loads file1.js
file2.jsp loads file2.js

所以从 grunt 生成的 javascript 文件包含 file1 + file2。 问题是： 如果在 file1.js 我有：

$(document).on('ready', function()...)

var funct = function() {
...
};

$('.class').on('click', function(){...})

而且在 file2 中我还有另一个定义 funct 变量和 jquery 部分，以及生成的 javascript 文件 file1.jsp 和 file2 .jsp 调用两个相同的函数。我想保留以前的行为，但我也想加载单个 js 文件，而不是在不同的 jsp 页面中加载多个 js 文件。

更新：

我几句话，我有这样的结构：

js
 - eu
 - folder1
 -- file1.js
 - folder2
 -- file2.js
...

我想要做的是：缩小 js/eu 文件夹中的所有 js 文件，而不是连接所有缩小的文件并将 applicationScripts.min.js 文件加载到我的 index.jsp 中，而不是加载相关 jsp 中的所有单个文件文件。

Gruntfile.js 是：

concat: 
  { options: 
    { separator: '\n' }, 
    dist: { 
      src: [ 'js/eu_min/**/*.min.js' ], 
      dest: 'js/applicationScripts.min.js' } }, 
uglify: 
  { options: 
    { pretty: true }, 
    dist: { 
      files: { 
        expand: true, 
        src: "js/eu/**/*.js", 
        dest: "js/eu_min/", 
        ext: ".min.js" } } }, 
watch: { files: [ 'js/eu/**/*.js' ], 
tasks: [ 'uglify', 'concat' ] }

感谢您的支持

Answer 1

尝试使用 Grunt 的 Uglify 插件： https://github.com/gruntjs/grunt-contrib-uglify

这会缩小代码，其中包括将变量名称更改为简短的随机字符。

在合并文件之前执行此操作，因为如果事先将它们合并，解析器将假定它们是同一个变量。

Answer 2

冲突的变量名称或方法是许多开发人员将命名空间用于其逻辑的主要原因。这可以有不同的形式。一种方法是将您的逻辑包装在 IIFE 或立即调用的函数表达式中

(function(){
    var funct = function() {
    ...
    };

    $('.class').on('click', function(){...})
}());

它的作用是将逻辑放入一个立即调用的匿名函数中。 IIFE 中的元素，只要您正确地确定它们的范围，就只会存在于该函数中，因此执行相同类型命名空间的多个文件不会相互冲突。