如何将多个本地JS文件合并为单个文件并引入页面？

我本地有以下JS文件：

<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script>

请问是否有合规的方法将这些文件全部合并到单个JS文件（例如jqwidgets.js），之后只需在页面中引入该单个文件即可？

完全可以通过合规方式合并这些文件，以下是几种可行方案：

1. 手动合并（适合小体量场景） #

这是最直接的方法，核心注意点是必须严格保留原文件的引入顺序——因为jqWidgets的插件依赖核心文件（比如jqxgrid.js是grid系列插件的基础，其他grid相关模块都依赖它）。

• 操作步骤：
  1. 创建一个新文件jqwidgets.js
  2. 按你原页面中引入的顺序，依次将每个JS文件的内部代码复制到新文件中（不要复制<script>标签，只取文件里的JS内容）
  3. 保留每个原文件的版权注释信息，确保符合许可协议要求

2. 使用构建工具自动合并（适合长期维护或多文件场景） #

如果需要频繁更新文件，用构建工具可以提高效率，还能按需做代码压缩：

用Gulp合并 #

• 先安装依赖：

  npm install gulp gulp-concat --save-dev
  

• 新建gulpfile.js，写入合并任务：

  const gulp = require('gulp');
  const concat = require('gulp-concat');
  
  gulp.task('concat-jqwidgets', function() {
    return gulp.src([
      'jqwidgets/jqxgrid.js',
      'jqwidgets/jqxgrid.pager.js',
      'jqwidgets/jqxgrid.sort.js',
      'jqwidgets/jqxgrid.filter.js',
      'jqwidgets/jqxcheckbox.js',
      'jqwidgets/jqxgrid.columnsresize.js',
      'jqwidgets/jqxgrid.selection.js',
      'jqwidgets/jqxgrid.grouping.js',
      'jqwidgets/jqxwindow.js',
      'jqwidgets/jqxtooltip.js'
    ])
    .pipe(concat('jqwidgets.js'))
    .pipe(gulp.dest('dist/'));
  });
  

• 运行命令执行合并：

  gulp concat-jqwidgets
  

  生成的合并文件会在dist目录下。

用Webpack/Rollup合并 #

这类工具不仅能合并文件，还支持代码压缩、模块化处理：

• 配置入口文件（比如entry.js），按顺序导入所有需要的JS：

  import './jqwidgets/jqxgrid.js';
  import './jqwidgets/jqxgrid.pager.js';
  import './jqwidgets/jqxgrid.sort.js';
  // 依次导入剩余文件...
  

• 配置打包输出为单个jqwidgets.js，执行打包命令即可生成目标文件。

3. 合规性关键注意事项 #

• 严格遵守jqWidgets的许可协议：如果是商业授权，合并后的文件仍需符合授权条款；如果是开源许可（如MIT），必须保留原文件的版权声明，不得篡改原代码的功能逻辑。
• 合并后测试功能：确保所有grid、窗口、tooltip等功能正常运行，避免因顺序错误导致依赖失效。

内容的提问来源于stack exchange，提问作者Millhorn