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

Question

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

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

所以从 grunt 生成的 javascript 文件包含file1+file2。 问题是： 如果在文件1中.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 文件加载到我的索引中.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 中的元素，只要您正确限定它们的作用域，将只存在于该函数中，因此执行相同类型命名空间的多个文件不会相互冲突。