前端使用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目录的文件发布到生产环境当中了.

说明

1. reactweb-cli使用webpack2进行编译打包, 使用babel进行es6语法进行编译.
2. 默认使用chunkhash对js/css/img文件名进行hash处理, 以此来避免发布新版本时不使用浏览器缓存.
3. 开发环境下, 使用devtool: "cheap-module-eval-source-map", 进行开发, 使用此类型的source map, 将能方便的帮助我们在js编译出错时快速定位到出错处.
4. 默认使用可以使用css或less进行样式的编写.有需要大家也可以自行去修改(只需要安装相应的css预编译器的loader即可, 如npm install --save-dev sass sass-loader, 即可使用.sass来编写样式了. dev环境下, 保留source-map以方便调试.