javascript - 如何将所有 Javascript 文件的引用添加到一个文件中？

Question

我这里有个情况。我从头开始了 angularjs 项目。对于我添加到项目中的每个 js 文件，它都需要在 index.html 中引用。我想避免。任何人都可以建议我最好的和最容易实现的方法来解决它。

我正在寻找两种选择:(但不知道该怎么做)

1) 包含所有js文件的单个文件，然后该单个文件可以在index.html中引用

2) 还是应该在浏览器需要时以某种方式自动添加？

显然，除了上面提到的以外，可能还有其他选择。任何建议都会有所帮助提前致谢。

Answer 1

正如亚历山大所说，如果你选择Grunt , 你可以使用 concat plugin将选定文件列表合并到一个目标中:

在你的 gruntfile.js 中加载 select 插件之后

grunt.loadNpmTasks('grunt-contrib-concat');

在 grunt 配置中定义一个任务:

grunt.initConfig({
  concat: {
    options: {
      separator: ';',
    },
    dist: {
      // your source file list
      src: ['src/js/*.js'], 
      //your destination file
      dest: 'dist/app.js',
    },
  },
});

然后将此任务注册到列表中:

grunt.registerTask('compile', ['concat']);

这将通过在命令行中输入“grunt compile”来运行

所以你只需要在你的索引中包含 dist/app.js 文件。

grunt 中有许多可用的插件，即您可以使用 grunt-include-source 动态地包含您的 app.js 文件。插件，或使用 grunt-contrib-uglify 最小化 js 文件.

有关 gruntfile 的更多信息可用 here

您可以按照第二点的要求实现结果，我认为您可以使用以下解决方案:

• > WebPack
• > RequireJS

更新:

抱歉，我找不到端到端的连接教程。

对于通用的 Grunt 教程，您可以阅读 this

否则你可以关注getting started来自官方 Grunt 站点的页面，用于安装、配置和总体概述。

当他们谈论插件时，请参阅 grunt-contrib-concat 的自述文件上面链接和解释的插件。

这些页面可以为您提供所需的所有技能。

最后，在 Gruntfile.js 中自定义 concat 配置，将所有要合并的文件放入 dist.src 中，并设置为 dist.dest，并且只包含后者在您的 html 中。

设置完成后，通过在项目文件夹的命令行中键入 grunt compile 来执行您的任务，将生成合并文件。