关于javascript：我正在尝试Grunt，需要一种简单的方法来串联我的模块


I'm trying out Grunt and need a simple way to concatenate my modules

这是我第一次使用Grunt，我想让它结合我所有的js模块，每个js模块都package在一个立即执行的函数中，包含一个" use strict"声明，并将它们放入一个文件中，package

只能在一个立即执行的函数中进行，只有一个'use strict'声明。

通常如何进行？

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

(我应该澄清一下，我确实可以正常工作，整理，进行单元测试，连接和缩小，当我在最终的串联文件中看到一堆不必要的立即执行功能时，感觉就像我做错了。)

从拉取请求10开始，grunt-contrib-concat现在具有footer选项。我会使用横幅和页脚来代替介绍文件和结尾文件。

Gruntfile.js

1
2
3
4
5
6
7
8
9
10
11
concat: {
  dist: {
    src: ['src/my-lib.js'],
    dest: 'dist/<%= pkg.name %>.js',
    options: {
      banner:";(function( window, undefined ){ \
 'use strict';",
      footer:"}( window ));"
    }
  }
}

我认为，这更易于维护，并允许使用Gruntfile中定义的其他属性进行模板化。

相关讨论

我通常像jQuery团队那样做。您创建一个intro.js和outro.js并将其他所有内容放置在它们之间：

intro.js

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

outro.js

1
}( window ));

grunt.js：

1
2
3
4
5
6
7
8
9
10
concat: {
  dist: {
    src: [
      'js/src/intro.js',
      ...
      'js/src/outro.js'
    ],
    dest: 'js/out/app.js'
  }
}
相关讨论

只需添加到@elclanrs回答中，如果您希望能够将模块保存在单独的文件中，以便在开发过程中更轻松地进行调试，则显然也必须将它们package为intro.js和outro.js。使用内置的concat任务，您必须编写如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
concat: {
  events_debug: { // wrap the 'events' module in IIFE
    src: [
      'js/src/intro.js',
      'js/src/events.js',
      'js/src/outro.js'
    ],
    dest: 'js/out/events.js'
  },
  callbacks_debug: { // wrap the 'callbacks' module in IIFE
    src: [
      'js/src/intro.js',
      'js/src/callbacks.js',
      'js/src/outro.js'
    ],
    dest: 'js/out/callbacks.js'
  }

  // zzZZZ...
}

这是非常乏味和自我重复的。也许您可能想为大量package的文件创建自定义任务，例如

1
2
3
4
5
6
7
8
wrap: {
    html: {
        intro: 'partials/intro.js',
        outro: 'partials/outro.js',
        src: 'js/*.js',
        dest: 'out' // output directory
    }
}

最近对此有疑问，请参见以下主题：

使用grunt concat，我如何将同一文件的串联自动化为许多其他文件？

相关讨论

我建议您使用我的grunt插件grunt-concat-deps，因为它会自动解析与您的体系结构无关的模块。

PLUS：该插件不需要任何显式的模块配置，因为它依赖于YUIDoc样式的声明式和分散式模块定义。

有关更多信息，请参见此处：https://github.com/leoselig/grunt-concat-deps