2

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

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

Uncaught ReferenceError: angular is not defined和

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

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

4

2 回答 2

3

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

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

于 2015-04-08T02:45:21.603 回答
1

对于您的 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/ ) ...或许多其他的可能性。

于 2015-04-08T14:35:50.113 回答