在 html 文件的单行中引用多个 js 文件

Posted 2023-03-05

【中文标题】在 html 文件的单行中引用多个 js 文件

【英文标题】：reference multiple js files in a single line in a html file

【发布时间】：2013-04-11 14:38:22

【问题描述】：

有没有一种简单的方法来引用html文件中的所有js文件而不是一个一个地引用它？

而不是这个 -

<script type="text/javascript" src="js/controllers/mainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/browseCtrl.js"></script>
...

我正在寻找这样的东西-

<script type="text/javascript" src="js/controllers/*.js"></script>

或者是否有一种工具可以将这些文件的内容复制到一个文件中并引用该文件？这将最小化 HTTP 调用。

【问题讨论】：

除非你的服务器支持这样的东西，否则它不会工作。这不是浏览器问题，应该为您正在使用的服务器技术添加一个标签，看看是否有解决方案。

【参考方案1】：

有没有一种简单的方法来引用HTML文件中的所有js文件而不是一个一个地引用它？

为了一些“容易”的价值。不过，浏览器没有内置任何东西可以做到这一点。

或者是否有一种工具可以将这些文件的内容复制到一个文件中并引用该文件？

有很多。 cat 是最简单的。

从您常用的构建工具中调用它。

您可以在开发期间使用require.js 之类的东西在运行时将它们组合起来，并通过您的构建工具中的Node 调用r.js 来打包您的登台和实时环境。

【讨论】：

您有cat 的链接吗？我在网上找不到。我刚开始学习 require.js 并听说过 r.js。我会试一试。谢谢！

【参考方案2】：

你可以试试Require.js。 Require.js 是唯一通过脚本标签加载的 JavaScript 文件。当您退出开发时，您可以使用 Require.js 的 r.js 将所有内容压缩并合并到一个文件中。

【参考方案3】：

我一直使用这个工具来缩小我的 JS 文件：

Online Javascript Compression Tool

您可以上传多个文件，它会为您将它们连接成一个。它还产生比 YUI 压缩器更小的文件大小，而且大多数时候谷歌的 JS 编译器也是如此。

【讨论】：

感谢您的链接。我已经为它添加了书签。不过，我正在寻找可以自动执行此操作的东西。

【参考方案4】：

我不确定为什么还没有提到这一点，但我认为这个线程有点过时了。因为我在寻找解决这个问题的过程中偶然发现了这个问题，所以我想我会在这里快速写一篇关于 GruntJS 的文章，供其他 JS 新手查找。

基本上，正确配置的 Gruntfile.js 将能够围绕 JS 执行各种任务，包括但不限于：连接文件、缩小文件、代码检查等等。

您可以在 Ubuntu 上安装 grunt：

$ sudo apt-get install nodejs
$ sudo npm -g install grunt-cli
$ cd /path/to/my/project
--- Assumming you have a package.json file already in place ---
$ npm install grunt --save-dev
--- Install grunt plugins you wish to use ---
$ npm install grunt-contrib-concat --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-watch --save-dev

在GruntJS site 上，有一篇关于如何使用 GruntJS 的很好的文章，但这里有一个 Gruntfile.js 示例：

Lint 所有 JS 文件（当前目录中的app.js 和ngmodules 目录中的所有.js 文件）。 连接文件并将其保存到dist/package-name.js。 将级联文件缩小并保存到dist/package-name.min.js。

Gruntfile.js:

module.exports = function(grunt) 

  grunt.initConfig(
    pkg: grunt.file.readJSON('package.json'),
    concat: 
      options: 
        separator: ';'
      ,
      dist: 
        src: ['app.js', 'ngmodules/**/*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      
    ,
    uglify: 
      options: 
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      ,
      dist: 
        files: 
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        
      
    ,
    jshint: 
      files: ['Gruntfile.js', 'app.js', 'ngmodules/**/*.js'],
      options: 
        // options here to override JSHint defaults
        globals: 
          jQuery: true,
          console: true,
          module: true,
          document: true
        
      
    ,
    watch: 
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    
  );

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

;

【参考方案5】：

还有 Gulp (http://gulpjs.com/)，可以和各种插件一起使用。这是一个示例，它将 *.js 文件连接到一个文件 (main.js) 中，然后重命名生成的文件并最终将其缩小：

var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat');

gulp.task('scripts', function()
return gulp.src('./src/js/*.js')
.pipe(concat('main.js'))
.pipe(rename(suffix: '.min'))
.pipe(uglify())
.pipe(gulp.dest('./src/js/*.js'));

【参考方案6】：

您可以尝试将您的 javascript 文件或插件合并为一个：

<script type="text/javascript" src="js/controllers/plugins.js"></script>

不过，您必须手动完成。 另一种选择是编写一个服务器端脚本来合并和缩小所有的 javascript 文件。