node+react+ant 项目

1.    下载并安装node.js，https://nodejs.org/en/。安装完成后，发现从国外直接下载各个软件非常缓慢，这里使用淘宝的镜像，使用如下命令：

npm config setregistry https://registry.npm.taobao.org

或者使用镜像：http://registry.cnpmjs.org/

或者使用公司内私服：在当前系统用户路径下的.npmrc 文件中添加 registry = http://10.0.27.61:8081/content/groups/npm-all/ 

2.    安装gulp和webpack

npm install gulp -g

npm install webpack–g

3.     针对一个工程打包，

a.     需要首先执行npm init命令，生成package.json文件，之后打包根据情况判断是否需要重新执行npm init命令；

b.    安装gulp的相关。

              安装npm install gulp-less --save-dev， 选择less css预处理器，所以需要安装gulp-less，使用less主要是蚂蚁金服提供的组件使用的css预处理器是less的；

              安装npm install gulp-sourcemaps --save-dev，需要生成sourcemap文件方便可以查找到编译后的less文件对应的源码；

              安装npm install gulp-autoprefixer --save-dev，据设置浏览器版本自动处理浏览器前缀；

              安装 npm install gulp-notify gulp-plumber --save-dev，编译出现错误时，进行通知；

              安装npm install gulp-jshint gulp-concat gulp-uglify --save-dev，js校验，合并及压缩；

              安装npm install gulp-imagemin gulp-cache --save-dev，图片压缩，已经缓存；

              安装npm install gulp-livereload –save-dev，动态加载组件

              安装npm install gulp-clean --save-dev，清除输出的插件。

c.     安装webpack

由于使用gulp整合webpack，所以使用如下命令安装webpack，同时支持es6

npm install gulp-babel babel-preset-es2015 gulp-webpack --save-dev

--save-dev 表示将依赖添加到 package.json 中的 'devDependencies' 对象中；--save 表示将依赖添加到package.json的‘dependencies’对象中。

这两者的区别，前者表示开发时依赖，但生产不用，比如webpack打包工具，babel编码转换工具；后者是生产必须依赖的包，如要开发react程序，则需要把相关包放置到dependencies对象中。

构造根目录下的webpack.config.js文件，具体参见示例工程，webpack会根据这个文件进行打包。以后如果打包内容有调整，也是修改这个文件；

4.    安装react

全局安装：npm install react react-dom babel-preset-react –g

本地安装：npm install react react-dom babel-preset-react --save-dev

安装gulp react插件：npm install gulp-react --save-dev

5.    如果有需要，通过loader安装css文件或者图片文件。npm install css-loader style-loader --save-dev安装css文件。参见精益学习指南，可以把CSS样式文件打包到javascript文件中。

6.     webpack是打包工具，它负责帮我们把各种前端的js文件、css文件打包合并成一个文件（或者多个，这与效率有关了）；gulp 构建工具，帮助我们完成之前需要手工完成的工作，举个之前在网上看到别人写的例子：需要注意的是，gulp 本身，不载入任何包的话，什么事情都做不了。

• 如果你在 gulp 里只载入了 webpack，那么此时 gulp 的作用 == webpack 的作用；
• 如果你 gulp 里没有载入 webpack，虽然还可以由一些其它工具实现打包，但打包的方式不同于 webpack，所以此时 gulp ∩ webpack = ∅；
• 而如果你的 gulp 载入了 webpack 和别的包，那么此时 webpack ∈gulp。

拿例子来说（伪代码），gulp 依次执行这三个 task，其中 task2 等于webpack：

//gulp 有的，webpack 没有的部分

task1= function(){

  require("seajs");

  seajs();

}

//等于 webpack

task2= function(){

  require("webpack");

  webpack();

}

//gulp 有的，webpack 没有的部分

task3= function(){

  console.log(3);

}