我尝试了Grunt，并需要一个简单的方法来连接我的模块 [英] I'm trying out Grunt and need a simple way to concatenate my modules

问题描述

这是我第一次使用Grunt，我希望它将所有js模块结合起来，每个模块都包含在一个立即执行的函数中，包含'use strict'声明并将它们放入一个文件中，只有一个立即执行的函数，只有一个'use strict'声明。

这通常是如何完成的？

我认为这将是一个常见的用例？也许我以错误的方式去做事情？我是否应该使用模块加载格式之一（即commonjs，amd）所有这些文件将始终在浏览器中一起加载，所以我实际上不介意删除所有立即执行的功能，如果这是人们通常的做法。最重要的部分是最终的结果是以某种方式包装，传递lint和单元测试，并包含'use strict'声明。

（我应该澄清，我确实拥有它工作，linting，单元测试，连接和缩小，当我在最后的连接文件中看到一堆不必要的立即执行的函数时，感觉就像我做错了什么。）

解决方案

我通常会像 jQuery团队做到了这一点。您可以创建一个 intro.js 和 outro.js ，并将所有内容放在两者之间：

intro.js

 ;（function（window，undefined） {
'use strict'; 
  

outro.js

 }（window））; 
  

grunt.js ：

  concat：{
 dist：{
 src：[
'js / src / intro.js'，
。 .. 
'js / src / outro.js'
]，
 dest：'js / out / app.js'
} 
} 
  

This is my first time using Grunt and I'd like to have it combine all my js modules, each of which is wrapped in an immediately executing function, containing a 'use strict' declaration and put them into one file, wrapped up in only one immediately executing function, with only one 'use strict' declaration.

How is this normally done?

I figured this would be a common use case? Perhaps I'm going about things the wrong way? Should I be using one of the module loading formats (i.e. commonjs, amd) All these files will always be loaded together in the browser, so I actually wouldn't mind removing all the immediately executing functions if that's how people normally go about it. The important part is that the end result is somehow wrapped, passes lint and unit tests and contains the 'use strict' declaration.

(I should clarify, I do have it working, linting, unit-testing, concatenating, and minifying, it just feels like I'm doing something wrong when I see a bunch of unnecessary immediately executing functions in the final concatenated file.)

解决方案

I usually do it like the jQuery team does it. You create an intro.js and outro.js and put everything else in between:

intro.js

;(function( window, undefined ){
  'use strict';

outro.js

}( window ));

grunt.js:

concat: {
  dist: {
    src: [
      'js/src/intro.js',
      ...
      'js/src/outro.js'
    ],
    dest: 'js/out/app.js'
  }
}

这篇关于我尝试了Grunt，并需要一个简单的方法来连接我的模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！