Assemble 每个模块都放在一个 .js 文件中

Question

我想尽量减少客户端在浏览器中加载脚本的 HTTP 请求数。这将是一个非常笼统的问题，但我仍然希望我能得到一些答案，因为到目前为止 javascript 中的模块管理一直很痛苦。

现状

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

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

服务器在 Node.js 上运行并按要求发送脚本。

显然，这是最不理想的做法，因为所有模型、集合等也被分成它们自己的文件，这些文件会转化为许多不同的请求。

就研究而言

我遇到的库（使用 AMD 和 CommonJS 的 RequireJS）可以从发送到客户端的主 .js 文件中请求模块，但需要大量额外的工作才能使每个模块与每个库兼容：

;(function(factory){

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

}(function(){

    // Module code

    exports = moduleName;
}));

我的目标

我想在服务器上创建一个 'concatenates' 所有模块在一起的文件。如果我可以这样做而不必向已经存在的模块添加更多代码，那将是完美的。然后我可以在请求时简单地将单个文件提供给客户端。

这可能吗？

此外，如果我设法构建单个文件，我应该在其中包含开源库（jQuery、Angular.js 等）还是从外部 cdn 请求它们客户端？

Answer 1

如果我没理解错的话，您可以使用诸如 Grunt 之类的任务运行程序来为您连接文件。

看看 Grunt Concat 插件。

文档中的示例配置：

// Project configuration.
grunt.initConfig({
  concat: {
    dist: {
      src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
      dest: 'dist/built.js',
    }
  }
});

否则，正如您所说，'module loader' 系统（例如 Require JS or Browserify 可能是可行的方法。

Answer 2

I'd like to create a single file on the server that 'concatenates' all the modules together. If I can do so without having to add more code to the already existing modules that would be perfect.

当然可以。您可以使用 G运行t 或 Gulp 来做到这一点，更具体地说 grunt-contrib-concat or gulp-concat

下面是一个 Gruntfile.js 配置示例，用于连接 js 目录下的每个文件：

grunt.initConfig({
  concat: {
    dist: {
      files: {
        'dist/built.js': ['js/**/**.js'],
      },
    },
  },
});

此外，您可以使用 grunt-contrib-minify 在连接后缩小所有内容。

两个库都支持 source maps 因此，如果出现错误，您可以轻松调试。

您还可以使用 grunt-contrib-htmlmin.

缩小 HTML 文件

还有一个非常有用的库，叫做 grunt-usemin。 Usemin 让我们使用 HTML 评论 "control" 哪些文件被缩小（这样你就不必手动添加它们）。

缺点是您必须通过脚本标签将它们明确地包含在 HTML 中，因此无法通过 javascript 进行异步加载（例如使用 RequireJS）。

Additionally, if I do manage to build a single file, should I include the open source libraries in it (jQuery, Angular.js, etc.) or request them from an external cdn on the client side?

这是有争议的。两者各有利弊。串联供应商可确保，如果由于某种原因 CDN 不可用，您的页面将按预期工作。然而，服务的文件更大，所以你消耗更多的带宽。

根据我的个人经验，我倾向于将对页面绝对必要的供应商库包含到运行例如 AngularJS。

Answer 3

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

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

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

GULP link or GRUNT link

我用GULP.

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

除了让 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

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

中创建该文件

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

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

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

更新

这是我的 gulp 观看任务。

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

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

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

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

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

如果你想为你的测试说运行业力运行ner...

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

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

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

然后把这个任务karma添加到我上面说的你的手表上，就像这样...

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

还有

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

使用Gulp还是G运行t，有不同的文章。 Gulp 是在 G运行t 之后创建的，添加了一些 G运行t 所缺少的内容。不知道G运行t现在还缺不缺。不过，我非常喜欢 Gulp，并且发现它对大量文档非常有用。

祝你好运！

Assemble 每个模块都放在一个 .js 文件中

Assemble every module into a single .js file

javascript

httprequest

commonjs

node.js

requirejs

现状

就研究而言

我的目标