Question

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

当我使用Grunt将所有这些文件连接成一个mega文件时，我在加载页面时遇到错误，例如

Uncaught ReferenceError: angular is not defined和

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

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

Answer 1

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

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

Answer 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'
            }
        }
    },

另一种方法是将您的javascripts更改为AMD或CommonJS模块，这样您就不必担心正确的订单。 RequireJS（http://requirejs.org/docs/start.html）可能是AMD的例子或Webpack（http://webpack.github.io/）...或许多其他人。

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

2 个答案: