es6+angular1.X+webpack 实现按路由功能打包项目的示例


Posted in Javascript onAugust 16, 2017

需求来源

之前使用jspm来打包项目 但是有个最大的缺点,就是只能把项目打包成一个大的js,当项目开发到后期会很大,网上找了很久也没找到合理的jspm打包方式。 所以开始调研可以打包angular项目成多个文件的工具.

调研过程

过程中看了些 vue,react配合webpack按路由功能打包的demo,感觉webpack对于打包成多个文件比较擅长。

结果

第一步 核心模块依赖加载

#core.module.js //核心模块

import 'angular-route'; //官方路由依赖
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) //主要是路由配置文件

第二步 路由配置

#core.router.js //这里不是重点,只是一般的配置

import LoginRouter from '../states/login/login.route' //登入路由定义js 

function CoreRouter($routeProvider) {
  $routeProvider
    .when('/login',LoginRouter)
    .otherwise({redirectTo: '/login'});
}

CoreRouter.$inject = ['$routeProvider'];

export default CoreRouter;

第三步 异步请求路由控制器的js

#login.route.js //最重要的操作都在这里

import LoginTpl from './login.tpl.html' //模板 用webpack的raw-loader加载成文本字符串,具体配置看

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里面已经注册了LoginCtrl
          resolve(module.controller); 
        });
      });
    }]
  }
};
export default LoginRoute;

其他文件

#login.module.js

export default angular.module('xxx.bg.login',[]);
#login.controller.js //这就是第三步异步请求的js webpack会把这个js和它依赖到的js打包成一个js

import './login.module'
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'};
  }])
#webpack.config.js
var path = require('path')
module.exports = {
 entry: './source/com.xxx.bg/main.js', //项目入口文件
 output: {
  path: './dist/public',
  publicPath: './public/',
  filename: 'bundle.js'
 },
 resolve: {
  extensions: ['', '.js'],
  alias: {
   'src': path.resolve(__dirname, '../source')
  }
 },
 resolveLoader: {
  root: path.join(__dirname, 'node_modules'),
 },
 module: {
  loaders: [
   {
    test: /\.js$/,
    exclude: /node_modules|lib/,
    loader: 'babel-loader?stage=0',
    query: {compact: false}
   },
   {
    test: /\.html$/,
    exclude: /node_modules/,
    loader: 'raw-loader?stage=0'
   }
  ]
 }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现id模糊查询的小例子
Mar 19 Javascript
javascript的内存管理详解
Aug 07 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
js实现点击选项置顶动画效果
Aug 25 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 #Javascript
微信小程序自定义组件
Aug 16 #Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 #Javascript
微信小程序多列选择器range-key使用详解
Mar 30 #Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 #jQuery
微信小程序tabBar底部导航中文注解api详解
Aug 16 #Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 #Javascript
You might like
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
javascript闭包的理解
2015/04/01 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
js轮播图代码分享
2016/07/14 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
python之yield表达式学习
2014/09/02 Python
python实现网站的模拟登录
2016/01/04 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
英国办公用品商店:Office Outlet
2018/04/04 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
村级四风对照检查材料
2014/08/24 职场文书
见习报告怎么写
2014/10/31 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
办公室主任岗位职责
2015/01/31 职场文书
教师工作证明范本
2015/06/12 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
Vue全局事件总线你了解吗
2022/02/24 Vue.js
分享3个非常实用的 Python 模块
2022/03/03 Python