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

我想尽量减less客户端在浏览器中加载脚本的HTTP请求数量。 这将是一个相当普遍的问题,但我仍然希望我能得到一些答案,因为JavaScript中的模块pipe理已经是一个痛苦。

现在的情况

现在,在开发中,每个模块都是从主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; })); 

我的目标

我想在服务器上创build一个将所有模块连接在一起的文件。 如果我可以做到这一点,而不必添加更多的代码,已经存在的模块将是完美的。 然后,我可以简单地将这个单个文件提交给客户端。

这可能吗?

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

你所要做的,从我能告诉,是concat你的js文件到一个文件,然后在你的main.html你会有这个

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

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

GULP 链接或GRUNT 链接

我使用GULP

你可以根据具体情况使用gulp,也就是说从命令行调用gulp来执行gulp代码,或者使用手表自动保存。

除了一口气工作,包括吞咽文件,你需要做你所需要的,我只会提供一点我用什么来得到你的答案。

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

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

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

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

我使用这个信息在下面的一个吞咽任务

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

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

 gulp makeOneFileToRuleThemAll 

这个调用运行相关的gulp任务,它使用'gulp-concat'将所有文件合并到一个名为'weHaveTheRing.js'的新文件中,并在目标'public /'中创build该文件

然后把这个新文件包含到main.html中

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

至于将所有的文件包含在一个文件中,包括你的供应商文件,只要确保你的供应商代码先运行。 除非你有一个确定的方法来让你的供应商的代码先加载而没有任何问题,否则最好保持独立。

UPDATE

这是我的大嘴观察任务。

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

然后我启动我的服务器(你可能会有所不同)

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

注意:您可以使用任何电影或显示您想要的参考! 🙂

现在只需要对它进行编码,每当你在指定的文件中进行更改时, GULP就会运行你的任务。

如果你想说为你的testing跑者跑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,以及每个模块。 然后在你的各种项目中使用它们。 只要确保你的项目的package.json有你需要的开发或其他任何模块。

关于是否使用Gulp或Grunt有不同的文章。 Grunt是在Grunt之后做了一些Grunt缺乏的补充。 我不知道Grunt是否缺乏它们。 我非常喜欢Gulp,并且发现它对于大量文档非常有用。

祝你好运!

我想在服务器上创build一个将所有模块连接在一起的文件。 如果我可以做到这一点,而不必添加更多的代码,已经存在的模块将是完美的。

你当然可以。 您可以使用Grunt或Gulp来做到这一点,更具体地说, grunt-contrib-concat或gulp-concat

下面是一个Gruntfile.jsconfiguration的例子,用于连接js目录下的每个文件:

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

另外,你可以使用grunt-contrib-minify来连接之后缩小所有内容。

这两个库都支持源地图,所以在出现错误的情况下,您可以轻松地进行debugging。

你也可以使用grunt-contrib-htmlmin来缩小你的HTML文件。


还有一个非常有用的库叫做grunt-usemin 。 Usemin让我们使用HTML注释来“控制”哪些文件被缩小(所以你不必手动添加它们)。

缺点是你必须通过脚本标签明确地将它们包含在你的HTML中,所以不需要通过JavaScript进行asynchronous加载(例如RequireJS)。


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

这是有争议的。 两者都有优点和缺点。 连接供应商确保,如果由于某种原因,CDN不可用,您的网页按预期工作。 然而,服务的文件更大,所以你消耗更多的带宽。

以我个人的经验,我倾向于包含供页面运行的绝对必要的供应商库,例如AngularJS。

如果我理解正确,可以使用Grunt等任务运行程序为您连接文件。

看看Grunt Concat插件。

来自文档的示例configuration:

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

否则,正如你所说的那样,一个“模块加载器”系统,比如Require JS或者Browserify可能就是要走的路。