前端使用React.js+webpack进行组件化开发越来流行了. 想使用react.js进行组件化开发,但又不想学习太多新知识(比如如何配置webpack等),使用脚本手架工具自然为上上之选.
reactweb-cli
用于快速创建react web 项目. 使用方法也很简单:
安装
npm install -g reactweb-cli
创建新项目
reactweb init my-project 根据提示一步步操作,创建新的工程(示例工程名为: my-project)
项目结构
- 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 以方便调试.
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|