连接供应商 js 文件的最佳方法是什么？答案

【问题标题】：What's the best way to concatenate vendor js files?连接供应商 js 文件的最佳方法是什么？
【发布时间】：2023-03-26 01:36:01
【问题描述】：

在我的 Angular JS 应用程序中，我使用了很多第三方包，主要通过 Bower 维护。

当我使用 Grunt 将它们全部连接成一个巨型文件时，我在加载页面时遇到错误，例如

Uncaught ReferenceError: angular is not defined 和

GET http://localhost:8080/theproj/v4/dist/app/bootstrap.css.map 404 (Not Found)

正确连接所有这些文件以确保所有内容都以正确的顺序加载并且不会导致问题的最佳方法是什么？

【问题讨论】：

标签： javascript angularjs gruntjs dependencies grunt-contrib-concat

【解决方案1】：

第一个问题：很多时候第三方库必须以特定顺序加载。这看起来像是你的第一个问题的来源。有些东西正在尝试使用角度，并且它在角度代码之前被加载。您应该重构您的 grunt 任务以使用第三方库的预定义顺序。

第二个问题：您可能缺少 .map 文件。这是 Chrome 开发工具使用的文件，用于向您展示 css 的原始源代码（sass 或更少）。要么提供映射文件，要么从 bootstrap.css 中删除对它的引用。或者直接忽略该错误，它只是在您打开 chrome 开发工具时出现的错误，实际上并不会影响您的应用程序。

【讨论】：

【解决方案2】：

对于 javascript 文件的正确顺序问题，我在一个较大的项目中遇到了这个问题，没有人真正知道正确的顺序。幸运的是，我们发现 Google Closure Compiler 正是这样做的：https://github.com/google/closure-compiler

你把你所有的 js 文件都给它，它会分析它们并按顺序连接它们

$ java -jar compiler.jar --js_output_file=out.js in1.js in2.js in3.js ...

甚至还有一个用于连接的 grunt 插件：https://github.com/gmarty/grunt-closure-compiler

    'closure-compiler': {
        frontend: {
            closurePath: '/src/to/closure-compiler',
            js: 'static/src/frontend.js',
            jsOutputFile: 'static/js/frontend.min.js',
            maxBuffer: 500,
            options: {
                compilation_level: 'ADVANCED_OPTIMIZATIONS',
                language_in: 'ECMASCRIPT5_STRICT'
            }
        }
    },

另一种方法是将您的 javascript 更改为 AMD 或 CommonJS 模块，这样您就不必担心正确的顺序。 RequireJS (http://requirejs.org/docs/start.html) 可能适用于 AMD，例如 Webpack (http://webpack.github.io/) ...或许多其他人。

【讨论】：

closure-compiler 看起来很有趣，但文档太糟糕了，我无法浪费时间试图弄清楚