前端使用React.js+webpack进行组件化开发越来流行了.
想使用react.js进行组件化开发,但又不想学习太多新知识(比如如何配置webpack等), 使用脚本手架工具自然为上上之选.
reactweb-cli
用于快速创建react web 项目.
使用方法也很简单:
安装
npm install -g reactweb-cli
创建新项目
reactweb init my-project
根据提示一步步操作, 创建新的工程(示例工程名为: my-project)
image.png
项目结构
- my-project
+ build // webpack相关配置
+ config // 配置
- src // 源码
- asserts // 静态资源
+ imgs // 图片: png, jpg...
+ styles // 样式: css, less...
+ components // React组件
+ static // 高度静态资源
+ test // 测试相关
.babelrc // babel配置
.eslintignore // eslint 忽略配置
.eslintrc.js // eslint 配置
.gitignore // git 忽略配置
.postcssrc.js // postcss配置
index.html // html模板
package.json
README.md
运行开发server
$ cd my-project # 进入到工程目录
$ npm install # 安装依赖库
$ npm run dev # 运行开发Server
运行npm run dev后程序会在默认浏览器中打开http://127.0.0.1:8080/
默认情况下, 开发Serve端口号为8080.
当然, 如果有需要, 大家也可以自动在/config/index.js中进行修改.
发布生产文件
$ npm run build
运行这条命令后, 将会在项目目录下生成一个dist的目录, 即生产文件所在目录.
此时, 即可以用该dist目录的文件发布到生产环境当中了.
说明
- reactweb-cli使用webpack2进行编译打包, 使用babel进行es6语法进行编译.
- 默认使用chunkhash对js/css/img文件名进行hash处理, 以此来避免发布新版本时不使用浏览器缓存.
- 开发环境下, 使用
devtool: "cheap-module-eval-source-map", 进行开发, 使用此类型的source map, 将能方便的帮助我们在js编译出错时快速定位到出错处. - 默认使用可以使用css或less进行样式的编写.有需要大家也可以自行去修改(只需要安装相应的css预编译器的loader即可, 如
npm install --save-dev sass sass-loader, 即可使用.sass来编写样式了.dev环境下, 保留source-map以方便调试.
