Question

我有一个angularjs应用程序，并且有一堆控制器，服务和指令。我说它们是controller.js，service.js和directive.js，但事实是，有更多的js文件比三个。为了减少http请求，我将这些js文件合并为一个，让我说它是app.js。所以我的index.html看起来像

<html lang="en">
<body>
    <div data-ng-view></div>
    <script src="app.js"></script>
</body>
</html>

但是，在我的开发环境中，我想调试分离的文件而不是组合文件。修改后的index.html提供了功能。

<html lang="en">
<body>
    <div data-ng-view></div>
    <script src="controller.js"></script>
    <script src="service.js"></script>
    <script src="directive.js"></script>
</body>
</html>

但是，我不想更改index.html。是否可以定义类似的内容：

require('controller.js');
require('service.js');
require('directive.js');

在我的app.js中。我做了一些搜索，结果显示有一种方法使用angularjs和requirejs，但是，它需要我以requirejs方式重新定义我的控制器和服务。在我的案例中需要付出很多努力。并且，我不需要实现动态加载，因为在生产环境中，只需要下载一个javascript文件。

Answer 1

一个非常好的解决方案是使用源图。所以即使你有一个文件，浏览器也知道初始文件！阅读更多html5rocks。

另外，我强烈建议您为这类工作使用javascript任务运行器/构建系统，例如grunt或gulp。

使用gulp连接和创建源映射非常简单：

var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('javascript', function() {
  return gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(concat('all.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

第二个选项是这个插件gulp-preprocess，您可以在其中设置不同的env变量，例如dev，production。并根据任务加载连接文件或单独加载每个文件。

很抱歉提供基于外部插件的解决方案，但我认为它们可以为您节省大量时间！

Answer 2

如果您希望将这些文件分开用于测试和调试，但要将它们合并用于生产，我建议使用Grunt.js或我个人喜欢的构建系统Gulp.js。使用这些自动构建工具，您可以创建一个任务，它将创建项目目录，组合，缩小和破坏JS文件，并生成允许开发工具引用原始文件的映射。这可以为您的工作流程创造奇迹。这确实需要Node.js，因此您也必须安装它。它仍然需要付出很多努力，但我认为这比重写所有代码要好。

特定案例的示例构建文件可能如下所示：

//this(my-js) will grab all js file in the js directory, combine, minify, mangle, 
//rename and create sourcemaps. it also has a dependency(js-libs) to handle 
//your libraries first.
gulp.task('my-js', ['js-libs'], function() {
return gulp.src([
        'src/js/*.js',
    ])
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(concat('app.min.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest('build/js'));
});

//this task will run the js task and then start a task that watches the files for 
//changes and reruns the my-js task anytime something changes
gulp.task('default', ['my-js'], function () {
    gulp.watch('src/js/*.js', ['my-js']);
});

现在这只是我想出的一个例子。未经测试。一旦es6出来，我们就可以访问import 'somefile'。另外，请记住，当完全实现http / 2时，我们将进行多路复用，这将允许在单个连接中发出多个文件请求：https://http2.github.io/faq/#why-is-http2-multiplexed

如何加载angularjs脚本文件

2 个答案: