React Component Builder
前置要求
安装 Node 环境,最低要求 Node.js 6 LTS 版本。
https://nodejs.org/en/download/
Homewbrew 或 NVM 安装 Node.js
Mac 系统推荐使用- Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"brew install node
- NVM
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.3/install.sh | bashnvm install node
更多 NVM 介绍: 安裝多版本 Node.js
安装
npm install -g recombl
初始化
在当前目录下,生成一个完整的项目文件夹,包含配置文件。
reco init [project_name]
.
├── client
│ ├── container
│ │ └── index.js
│ ├── html
│ │ └── index.html
│ ├── image
│ ├── slice
│ └── style
│ └── index.scss
├── config
│ └── pageConfig.js
├── package.json
└── userConfig.js
配置
用戶配置 userConfig.js
moduleexports = jsPath: "client/container" stylePath: "client/style" htmlPath: "client/html" projectName: "my-project-1" userName: "hoyangtsai" sprites: spritesmith: padding: 4 //雪碧图间距 retina: true //retina屏幕 ratio: 3 //图片分倍率 webpack: externals: 'react': 'React' 'react-dom': 'ReactDOM' resolve: alias: "component": "" //组件路径 "currentDir": process browsersList: 'last 4 versions' 'Android >= 4.0' 'Chrome >= 37' 'iOS>=7' postcss: false //true or false pageConfig: "config/pageConfig.js"
- postcss 设置
true
,使用 QQ浏览器 postcss 默认配置 (autoprefixer, postcss-flexbugs-fixes, postcss-gradientfixer) - pageConfig 不同用户可指定不同页面配置
页面配置 config/pageConfig.js
moduleexports = path: "" //页面层级 entry: "index" //页面文件列表 Array or Object commonsChunk: name: null //公共js、样式文件名,默认common minChunks: null //至少几个文件出现才抽取公共 exclude: sprites: //覆写 userConfg.js 雪碧图配置 spritesmith: padding: 4 retina: true ratio: 3 // external loaders for webpack extLoaders: test: /\.?$/ loader: require + '?name=[path][name].[ext]'
-
path
如果多人开发一个项目文件夾,填入 js 入口文件对应的 html 和 style 路径。不需要可以留空。
-
entry
页面 js 入口文件,通常一个 js 入口文件对应一个 html 文件,可以是数组或对象。
// arrayentry: 'page1' 'page2' 'page3';// objectentry: 'page1': 'page1/sub-page-1' 'page1/sub-page-2' 'page-sub-page-3' 'page2': 'page2/sub-page-1' 'page2/sub-page-2'
-
commonsChunk
- name - 生成公用的 js 和 css 文件名,填
null
默认文件名为 common。 - minChunks (false | Infinity | null | Number) - 多少页面引同一个文件才生成共用文件。
- exclude - 排除不抽出做公共組件的頁面。
- name - 生成公用的 js 和 css 文件名,填
-
extLoaders
支持外部引入其他 loader。
开发模式
启动 webpack-dev-server 与 inline mode 和 Hot Module Replacement 对源码进行实时编译。
reco serve
引数 argument
-i, --ip
选填;本地运行ip,默认localhost。
-p, --port
选填;本地运行端口,默认8003。
-o, --open
选填;编译完成后,自动开启浏览器进行预览。
生成新模版
读取 pageConfg.js 中 entry 生成新模版,其中包含 js, html 和 scss 文件。
reco new
生成静态文件
将目前源文件打包成静态文件,生成至 publish 文件夹底下。
reco build
引数 argument
-m, --minimize
选填;压缩 js 和 css 文件。
上传重构测试服务器
将 publish.zip 用 http request 方式上传到指定服务器
reco upload
引数 argument
-h
选填;指定服务器位址。
-u
选填;用户名称。
-p
选填;项目名称。
-o, --open
选填;上传完成后,自动开启浏览器进行预览。