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