需求来源
之前使用jspm来打包项目 但是有个最大的缺点,就是只能把项目打包成一个大的js,当项目开发到后期会很大,网上找了很久也没找到合理的jspm打包方式。 所以开始调研可以打包angular项目成多个文件的工具.
调研过程
过程中看了些 vue,react配合webpack按路由功能打包的demo,感觉webpack对于打包成多个文件比较擅长。
结果
第一步 核心模块依赖加载
import 'oclazyLoad' //angular异步加载依赖
import CoreRouter from './core.router'
import LoginModule from '../states/login/login.module' //登入模块定义js
export default angular.module('xxx.bg',[
'ngRoute','oc.lazyLoad',LoginModule.name,])
.config(CoreRouter) //主要是路由配置文件
第二步 路由配置
function CoreRouter($routeProvider) {
$routeProvider
.when('/login',LoginRouter)
.otherwise({redirectTo: '/login'});
}
CoreRouter.$inject = ['$routeProvider'];
export default CoreRouter;
第三步 异步请求路由控制器的js
let LoginRoute = {
template : LoginTpl,controller : 'LoginCtrl',//这里只是写了一个字符串
resolve: {
load: ['$q','$ocLazyLoad',function ($q,$ocLazyLoad) {
return $q((resolve) => {
//下面这一行写法是webpack在需要的时候才下载依赖的模块,[具体看这里][2]
require.ensure([],() => {
//这里只是依赖了一个控制器文件,但是这个文件里面你可以import很多其他的依赖
let module = require('./login.controller');
//加载模块名为xxx.bg.login的模块,具体是什么作用没弄明白,请高手解答
$ocLazyLoad.load({name: 'xxx.bg.login'});
//promise 的成功回调,不返回出去参数也没关系,因为在login.contorller.js里面已经<a href="/tag/zhuce/" target="_blank" class="keywords">注册</a>了LoginCtrl
resolve(module.controller);
});
});
}]
}
};
export default LoginRoute;
其他文件
import '../../../lib/echarts/echarts.min' //随便引入了一个百度图表 比较大的js 超过100K webpack会报警,需要在配置中设置
export default angular.module('xxx.bg.login')
//注册控制器
.controller('LoginCtrl',['$rootScope',function($rootScope){
$rootScope.theme = {name:'login-page'};
}])