将每个模块组装成一个.js文件

Question

我想最小化客户端在浏览器中加载脚本的HTTP请求数.这将是一个相当普遍的问题,但我仍然希望我能得到一些答案,因为javascript中的模块管理到目前为止一直很痛苦.

现在的情况

现在,在开发中,每个模块都是从主html模板单独请求的,如下所示:

<script src="/libraries/jquery.js"></script>
<script src="/controllers/controllername.js"></script>
...

服务器在Node.js上运行,并在请求时发送脚本.

显然,这是最不理想的方式,因为所有模型,集合等也被分成他们自己的文件,这些文件转换成许多不同的请求.

就研究而言

我遇到的库(RequireJS使用AMD和CommonJS)可以从发送到客户端的主.js文件中请求模块,但是需要大量额外的工作来使每个模块符合每个库:

;(function(factory){

    if (typeof define === 'function' && define.amd) define([], factory);
    else factory();

}(function(){

    // Module code

    exports = moduleName;
}));

我的目标

我想在服务器上创建一个文件,将所有模块"连接"在一起.如果我可以这样做而无需向现有模块添加更多代码,那将是完美的.然后,我可以在请求时将该单个文件简单地提供给客户端.

这可能吗？

另外,如果我设法构建一个单独的文件,我应该在其中包含开源库(jQuery,Angular.js等)还是从客户端的外部cdn请求它们？

Answer 1

据我所知，你要求做的是将你的 js 文件连接到一个文件中，然后在你的 main.html 中你会得到这个

<script src="/pathLocation/allMyJSFiles.js"></script>

如果我的假设是正确的，那么答案将是使用以下两项之一

GULP链接或 GRUNT链接

我使用GULP。

您可以根据具体情况使用 gulp，这意味着从命令行调用 gulp 来执行 gulp 代码，或者使用监视在保存时自动执行此操作。

除了让 gulp 工作并包含完成您需要的操作所需的 gulp 文件之外，我只会提供一些我用来获得答案的内容。

在我的 gulp 文件中我会有这样的东西

var gulp = require('gulp');
var concat = require('gulp-concat');
...maybe more.

然后我需要将文件路径缩减为一个文件。

var onlyProductionJS = [
  'public/application.js',
  'public/directives/**/*.js',
  'public/controllers/**/*.js',
  'public/factories/**/*.js',
  'public/filters/**/*.js',
  'public/services/**/*.js',
  'public/routes.js'
];

我在如下所示的 gulp 任务中使用此信息

gulp.task('makeOneFileToRuleThemAll', function(){
  return gulp.src(onlyProductionJS)
    .pipe(concat('weHaveTheRing.js'))
    .pipe(gulp.dest('public/'));
});

然后我通过调用在命令行中运行该任务

gulp makeOneFileToRuleThemAll

此调用运行关联的 gulp 任务，该任务使用“gulp-concat”将所有文件组合到一个名为“weHaveTheRing.js”的新文件中，并在目标“public/”中创建该文件

然后只需将该新文件包含到您的main.html中

<script src="/pathLocation/weHaveTheRing.js"></script>

至于将所有文件（包括供应商文件）包含到一个文件中，只需确保您的供应商代码首先运行即可。最好将它们分开，除非您有可靠的方法让您的供应商代码首先加载而不会出现任何问题。

更新

这是我的 gulp watch 任务。

gulp.task('startTheWatchingEye', function () {
  gulp.watch(productionScripts, ['makeOneFileToRuleThemAll']);
});

然后我像这样启动我的服务器（你的可能不同）

npm start
// in a different terminal window I then type
gulp startTheWatchfuleye

注意：您可以使用任何您想要的电影或节目参考！:)

现在只需编写代码，每次对指定文件进行更改时，GULP都会运行您的任务。

如果您想说为您的测试运行程序运行 Karma...

将以下内容添加到您的 gulp 文件中

var karma = require('karma').server;

gulp.task('karma', function(done){
  karma.start({
    configFile: __dirname + '/karma.conf.js'
  }, done);
});

然后将此任务业力添加到您的手表中，就像我上面所说的那样......

gulp.task('startTheWatchingEye', function(){
  gulp.watch(productionScripts, ['makeOneFileToRuleThemAll', 'karma']);
});

还

您的特定设置可能需要更多 gulp 模块。通常，您会全局安装 Gulp 以及每个模块。然后在您的各种项目中使用它们。只需确保您的项目的 package.json 具有您在 dev 或其他中需要的 gulp 模块。

关于是否使用 Gulp 还是 Grunt 有不同的文章。Gulp 是在 Grunt 之后创建的，并添加了一些 Grunt 所缺乏的内容。我不知道Grunt是否还缺少它们。不过，我非常喜欢 Gulp，并发现它非常有用，有很多文档。

祝你好运！