什么's是连接供应商js文件的最佳方式

What's the best way to concatenate vendor js files?

本文关键字：文件 js 最佳 方式 供应商 连接 什么      更新时间：2023-09-26

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

当我使用Grunt将它们连接到一个大型文件中时，当我加载页面时，我会遇到错误，例如

Uncaught ReferenceError: angular is not defined和

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

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

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

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

关于javascript文件的正确顺序问题，我在一个更大的项目中遇到了这个问题，没有人真正知道哪个是正确的顺序。幸运的是，我们发现Google闭包编译器正是这样做的：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'
            }
        }
    },

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

相关文章：