前端模塊化、構建工具

 

本文只是挖了個深坑，內容往後補充……　　2016-4-11

 

http://weibo.com/p/1001603934708609234550　　談談前端『新』技術　　RequireJS, SeaJS，Webpack, Browserify, SystemJS

這些新工具強大的擴展機制（尤爲是 Webpack）所帶來的一種新的前端打包思路：不單單是 JavaScript，而是將 HTML、CSS 和其餘靜態資源通通做爲『模塊』來看待。

https://segmentfault.com/q/1010000002503955　　前端開發工程化問題　　2016-5-3

http://www.cnblogs.com/hufeng/p/5186827.html　　關於前端結構調整的一次實踐　　2016-5-27

http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651220946&idx=1&sn=55b8dd7c028ab8d43c442096ffeb49b8&scene=23　　　　【第597期】滬江易將來：滬江網校前端架構漫談（值得看）　　2016-6-1

http://www.cnblogs.com/yexiaochai/p/4901341.html　　前端優化帶來的思考，淺談前端工程化　　2016-6-16

 

webpack

http://webpack.github.io/

http://webpack.github.io/docs/

 

React

http://www.infoq.com/cn/articles/react-art-of-simplity　　深刻淺出React（一）：React的設計哲學 - 簡單之美

http://www.infoq.com/cn/articles/react-and-webpack　　深刻淺出React（二）：React開發神器Webpack

http://www.infoq.com/cn/articles/react-jsx-and-component　　深刻淺出React（三）：理解JSX和組件

http://www.infoq.com/cn/articles/react-dom-diff　　深刻淺出React（四）：虛擬DOM Diff算法解析

http://www.infoq.com/cn/articles/react-flux　　深刻淺出React（五）：使用Flux搭建React應用程序架構

 

VUE.js

http://vuejs.org.cn/　　VUE.js 數據驅動的組件，爲現代化的 Web 界面而生 2016-3-31　　一個輕型的 MVVM 框架,

http://vuejs.org.cn/guide/　　API

http://www.zhihu.com/question/27791075　　vue，angular，avalon這三種MVVM框架之間有什麼優缺點？　　2016-4-12　　vue偏輕量，適合移動端，ng適應pc端，avalon適合兼容老瀏覽器的項目

https://github.com/aidenzou/vue-weui　　一個項目例子　　2015-4-12

https://youcai.shequcun.com/#!/　　給你們看一個用vue作的項目　　源碼：https://github.com/vuejs/vue-resource　　2016-4-19

http://blog.yaobieting.com/me/archives/vuewebpack實戰之簡單城市列表.html　　Vue+Webpack實戰之簡單城市列表　　2016-4-29

http://blog.yaobieting.com/me/archives/261.html　　在github上開了一個項目-移動端的vue組件　　2016-4-29

 

 

NPM:

npm與bower 　　2016-4-19

### npm與bower
* npm是伴隨node.js出現的一個包管理器，最開始只支持node.js模塊管理，但如今也支持javascript的包管理器。先後端通用
* bower是專門爲前端表現設計的包管理器，一切所有爲前端考慮
### 區別
* npm：支持嵌套地依賴管理，生成的文件夾叫 「node_modules」
* bower只能支持扁平的依賴，嵌套的依賴，由程序員本身解決。
### 開發中的用法
 * bower 管理前端的包
 * npm 管理後端的包和構建工具，例如yeoman,grunt,gulp,jshint等等
 * 但如今幾乎都用npm來下載管理包文件和後端模塊管理，不怎麼用bower

### npm生成的package.json
* package.json是管理npm裏面依賴包的
* 與那些gulpfile.js不是一回事哈，學gulp見http://www.gulpjs.com.cn/docs/getting-started/
* 執行npm init後，出現的文件
* package.json中字段解釋見http://www.tuicool.com/articles/vuiyIz
* npm的安裝步驟就去下一個nodejs文件，而後去npm -v
* npm下載插件，更多功能百度去
```
npm init  //建package.json文件
npm install jquery --save-dev  //在package.json中創建devDependencies依賴
npm install jquery --save  //在package.json中創建dependencies依賴，這樣上傳git時，就不用上傳"node_modules」文件了
npm install jquery  //不寫時，默認同上
npm install 或npm install --save-dev   //上傳到git或者公司版本庫的時候，能夠把npm生成的 「node_modules」 文件夾刪掉，克隆代碼後，再執行該命令，就會根據package.json中配置的依賴下載插件了
```

### bower生成的bower.json 

npm install http-server -g　　　　npm安裝　　2016-5-3

http-server　　　　　　　　　　　　輸入這個地址訪問網頁（http://192.168.2.172:8080）

 

Gulp：

http://www.cnblogs.com/shouce/archive/2016/05/10/5476468.html　　前端自動化工具 -- Gulp 使用簡介　　2016-5-10

 

zepto、 backbone、bootstrap、angular
前端模塊化/編譯/構建  CommonJS  requirejs seajs nodejs
前端構建工具如:Grunt、Gulp、FIS3

MV*框架  AngularJS  knockoutJS  ReactJS；
前端模塊化開發    RequireJS SeaJS 

==============================================
建立一個相似bootsrtap的組件示例頁面

要提出的頁面組件：
頁面橫行的標題頭（左邊是橙色）

node -v
npm -v
npm install -g fis3

 

 

 

前端架構：

http://www.tuicool.com/articles/q6JnEfA　　公司前端開發架構改造（工程化 ， 模塊化 ， 組件化）　　2016-4-19

http://fex.baidu.com/blog/2014/03/fis-module/　　前端工程之模塊化　　2016-4-19

http://www.cnblogs.com/yexiaochai/p/5311712.html　　　　小公司的前端應該怎麼作（葉小釵的，值得再去看）　　2016-5-11

① 完成先後分離，這步作不到，後面也不用作了
② 造成幾套UI庫
③ 根據業務形態，造成公共業務
④ 前端重複工做工具化
⑤ 造成優化體系
⑥ 造成統計體系
⑦ 創建頁面轉化漏斗模型
⑧ 作ABTesting方案

 

 

 

 

 

zepto、 backbone、bootstrap、angular
前端模塊化/編譯/構建 CommonJS requirejs seajs nodejs
前端構建工具如:Grunt、Gulp、FIS3

MV*框架 AngularJS knockoutJS ReactJS；
前端模塊化開發 RequireJS SeaJS

.......