摘要:最近寫復(fù)旦二手平臺(tái)的時(shí)候開始嘗試用一直推崇了很久的組件化。經(jīng)過一番抉擇之后選擇了的組合。所以在這里分享一下具體的實(shí)踐流程。自己有自己獨(dú)特的依賴注入以及模塊聲明方式,看起來似乎和是水火不容的,但事實(shí)上他們完全可以融合。
最近寫復(fù)旦二手平臺(tái)的時(shí)候開始嘗試用一直推崇了很久的組件化。經(jīng)過一番抉擇之后選擇了 webpack + angular 的組合。所以在這里分享一下具體的實(shí)踐流程。
WebpackWebpack是目前比較流行的前端打包工具,它同時(shí)支持AMD、CMD兩種模塊寫法,也原生支持npm或者bower安裝的模塊。它還能給css、scss、less、coffeescript、es6、圖片、html以及諸如jade、ejs的模板打包。
所以有什么卵用呢?
簡單地說就是,
1、原來你需要在中引入angular或者其他的npm模塊(有些npm模塊甚至沒有提供可以直接在瀏覽器端引用的js文件),現(xiàn)在只需要:
npm install angular
然后在app.js中:
angular = require("angular"); var app = angular.module("myApp",[]);
然后執(zhí)行
webpack app.js bundle.js
webpack會(huì)自動(dòng)分析依賴,然后編譯,這樣bundle.js就是你想要的東西了。
2、組件化的時(shí)候你要在頁面中引入一大堆東西,比如這樣: