前端模块化、构建工具

本文只是挖了个深坑，内容日后补充……　　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

.......