這篇文章主要介紹es6+angular1.X+webpack如何實(shí)現(xiàn)按路由功能打包項(xiàng)目,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)的關(guān)注點(diǎn)不是能為您做些什么網(wǎng)站,而是怎么做網(wǎng)站,有沒(méi)有做好網(wǎng)站,給創(chuàng)新互聯(lián)建站一個(gè)展示的機(jī)會(huì)來(lái)證明自己,這并不會(huì)花費(fèi)您太多時(shí)間,或許會(huì)給您帶來(lái)新的靈感和驚喜。面向用戶友好,注重用戶體驗(yàn),一切以用戶為中心。需求來(lái)源
之前使用jspm來(lái)打包項(xiàng)目 但是有個(gè)大的缺點(diǎn),就是只能把項(xiàng)目打包成一個(gè)大的js,當(dāng)項(xiàng)目開發(fā)到后期會(huì)很大,網(wǎng)上找了很久也沒(méi)找到合理的jspm打包方式。 所以開始調(diào)研可以打包angular項(xiàng)目成多個(gè)文件的工具.
調(diào)研過(guò)程
過(guò)程中看了些 vue,react配合webpack按路由功能打包的demo,感覺webpack對(duì)于打包成多個(gè)文件比較擅長(zhǎng)。
結(jié)果
第一步 核心模塊依賴加載
#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 //這里不是重點(diǎn),只是一般的配置 import LoginRouter from '../states/login/login.route' //登入路由定義js function CoreRouter($routeProvider) { $routeProvider .when('/login',LoginRouter) .otherwise({redirectTo: '/login'}); } CoreRouter.$inject = ['$routeProvider']; export default CoreRouter;
第三步 異步請(qǐng)求路由控制器的js
#login.route.js //最重要的操作都在這里 import LoginTpl from './login.tpl.html' //模板 用webpack的raw-loader加載成文本字符串,具體配置看 let LoginRoute = { template : LoginTpl, controller : 'LoginCtrl', //這里只是寫了一個(gè)字符串 resolve: { load: ['$q','$ocLazyLoad',function ($q,$ocLazyLoad) { return $q((resolve) => { //下面這一行寫法是webpack在需要的時(shí)候才下載依賴的模塊,[具體看這里][2] require.ensure([], () => { //這里只是依賴了一個(gè)控制器文件,但是這個(gè)文件里面你可以import很多其他的依賴 let module = require('./login.controller'); //加載模塊名為xxx.bg.login的模塊,具體是什么作用沒(méi)弄明白,請(qǐng)高手解答 $ocLazyLoad.load({name: 'xxx.bg.login'}); //promise 的成功回調(diào),不返回出去參數(shù)也沒(méi)關(guān)系,因?yàn)樵趌ogin.contorller.js里面已經(jīng)注冊(cè)了LoginCtrl resolve(module.controller); }); }); }] } }; export default LoginRoute;
其他文件
#login.module.js export default angular.module('xxx.bg.login',[]);
#login.controller.js //這就是第三步異步請(qǐng)求的js webpack會(huì)把這個(gè)js和它依賴到的js打包成一個(gè)js import './login.module' import '../../../lib/echarts/echarts.min' //隨便引入了一個(gè)百度圖表 比較大的js 超過(guò)100K webpack會(huì)報(bào)警,需要在配置中設(shè)置 export default angular.module('xxx.bg.login') //注冊(cè)控制器 .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', //項(xiàng)目入口文件 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' } ] } };
以上是“es6+angular1.X+webpack如何實(shí)現(xiàn)按路由功能打包項(xiàng)目”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站制作公司行業(yè)資訊頻道!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
標(biāo)題名稱:es6+angular1.X+webpack如何實(shí)現(xiàn)按路由功能打包項(xiàng)目-創(chuàng)新互聯(lián)
文章出自:http://m.rwnh.cn/article30/isopo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營(yíng)銷推廣、企業(yè)建站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站策劃、定制開發(fā)、用戶體驗(yàn)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容