小心！AngularJS结合RequireJS做文件合并压缩的那些坑
背景简介
现在前端开发已经不仅仅是一些简单的HTML、CSS和JS代码堆砌了，对于一个成熟的前端项目我们必须考虑到一些比较高级的技术的应用，尤其是在文件打包合并等方面。本文主要讲解在使用AngularJS结合RequireJS做文件合并压缩时需要注意的一些“坑”。
正确的姿势
1. RequireJS的参数配置
在使用RequireJS的时候，必须配置好其参数，例如baseUrl、paths等。具体可参考下面的示例：
require.config({
baseUrl: '/js',
paths: {
'angular': ['https://cdn.bootcss.com/angular.js/1.6.5/angular.min', 'lib/angular.min'],
'uiRouter': ['https://cdn.bootcss.com/angular-ui-router/0.4.2/angular-ui-router.min', 'lib/angular-ui-router.min']
},
shim: {
'angular': {
exports: 'angular'
},
'uiRouter': {
exports: 'uiRouter',
deps: ['angular']
}
}
});
2. AngularJS的模块定义
在使用AngularJS的时候，必须定义好其模块及其依赖。具体可参考下面的示例：
define(['angular'], function(angular) {
'use strict';
// 定义模块
var app = angular.module('myApp', [
'ui.router',
'myApp.services',
'myApp.controllers'
]);
// 定义控制器模块
app.module('myApp.controllers', []);
// 定义服务模块
app.module('myApp.services', []);
// 返回模块
return app;
});
3. 文件合并后的压缩处理
文件合并后还需要进行压缩处理，这里可以使用uglifyJS等进行压缩，具体可参考下面的示例：
({
mainConfigFile: 'config.js',
name: "app",
out: "app.min.js"，
optimize: "uglify2",
uglify2: {
output: {
beautify: false
}
}
})
4. HTML文件中的调用
最后，在需要调用打包后的JS文件的HTML文件中，需要注意多了一个.min的后缀，具体可参考下面的示例：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS+RequireJS</title>
</head>
<body>
...
<script src="/js/app.min.js"></script>
...
</body>
</html>
常见问题
问题一：在合并时出现依赖错误
解决方法：
- 确认使用
define、require时的参数依赖是否正确； - 确认在使用
define、require时的标识符是否正确； - 确认在配置
RequireJS时的参数是否正确； - 使用
r.js等工具进行调试。
问题二：打包文件过大
解决方法：
- 确认需要合并的模块是否合理；
- 对模块进行分解，使其合理地分散到多个文件中；
- 优化
RequireJS的加载方式，使不必要的模块得以按需加载。
结语
以上就是关于“小心！AngularJS结合RequireJS做文件合并压缩的那些坑”的完整攻略。希望对您有所帮助！
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：小心！AngularJS结合RequireJS做文件合并压缩的那些坑 - Python技术站
微信扫一扫 
支付宝扫一扫 