摘要:最近写复旦二手平台的时候开始尝试用一直推崇了很久的组件化。经过一番抉择之后选择了的组合。所以在这里分享一下具体的实践流程。自己有自己独特的依赖注入以及模块声明方式,看起来似乎和是水火不容的,但事实上他们完全可以融合。
最近写复旦二手平台的时候开始尝试用一直推崇了很久的组件化。经过一番抉择之后选择了 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、组件化的时候你要在页面中引入一大堆东西,比如这样: