use webpack and gulp to help write react redux es2015 and sass
webpack构建React,Redux,Sass,Es2015前端原型脚手架
webpack版本为 2.x.x
- 安装node版本6.0以上
- clone或者download本工程到本地
- 执行命令安装依赖包:
cd webpack-scheme
npm install
- 如果node-sass过程中报错导致无法安装，解决方法就是添加淘宝NPM镜像cnpm环境，然后以cnpm重新安装node-sass：
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install --save-dev node-sass
- 全局安装webpack, gulp, eslint:
npm install webpack -g
npm install gulp -g
npm install eslint -g
├── gulpfile.js # gulp任务配置
├── package.json # 项目配置
├── README.md # 项目说明
├── server # 本地server
│ ├── app.js # 本地server入口
│ ├── routes/ # 后端路由文件夹
│ ├── mock # 后端模拟数据文件夹
│ └── views/ # 后端views文件夹
├── src # 源码目录
│ ├── xxx.html # xxx入口文件
│ ├── css/ # css文件夹
│ ├── fonts/ # 字体文件
│ ├── img/ # 图片文件夹
│ ├── js # js&jsx文件夹
│ │ ├── xxx.js # xxx页面入口js/jsx文件
│ │ ├── action/ # Action Creators文件夹：存放可以触发的action函数
│ │ ├── components/ # React展示组件文件夹
│ │ ├── constants/ # Action 大写字符串描述事件
│ │ ├── containers/ # 容器文件夹：存放容器组件
│ │ ├── reducers/ # reducers文件夹：存放action的处理器reducers
│ │ ├── store/ # store文件夹
│ │ └── utils/ # 前端路由文件夹
│ ├── scss/ # scss文件夹
│ ├── libsPath.json # 手动配置某些模块的路径，可以加快webpack的编译速度
├── webpack-build.config.js # webpack基本配置
├── webpack.config.js # 正式环境webpack配置入口
└── webpack-dev.config.js # 开发环境webpack配置入口
- 新建html文件名与js根目录下js/jsx文件名称一致
- 启动dev模式命令：
npm run dev - 编译生成release版本命令：
gulp/npm run build, release版本代码在dist文件目录下 - 本地查看release版本命令：
npm run release - 如果需要使用less开发，请自行添加相关模块，webpack-build.config.js添加了less支持
- release版本生成时，如果使用了iconfont，dist文件夹下css引入文件的url会不准确。如果需要，请自行修改成正确的相对路径或者绝对路径
- 本脚手架适当修改后可用sass编写原型