安装 Node 环境,最低要求 Node.js 6 LTS 版本。
https://nodejs.org/en/download/
- 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 | bash
nvm 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
module.exports = {
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.cwd()
}
}
},
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 不同用户可指定不同页面配置
module.exports = {
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: /\.(jpe?g|png|gif|ttf|eot|woff2?)(\?.*)?$/,
loader: require.resolve('myapp-file-loader') + '?name=[path][name].[ext]'
}
]
}
-
path
如果多人开发一个项目文件夾,填入 js 入口文件对应的 html 和 style 路径。不需要可以留空。
-
entry
页面 js 入口文件,通常一个 js 入口文件对应一个 html 文件,可以是数组或对象。
// array
entry: ['page1', 'page2', 'page3'];
// object
entry: {
'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
-i, --ip
选填;本地运行ip,默认localhost。
-p, --port
选填;本地运行端口,默认8003。
-o, --open
选填;编译完成后,自动开启浏览器进行预览。
读取 pageConfg.js 中 entry 生成新模版,其中包含 js, html 和 scss 文件。
reco new
将目前源文件打包成静态文件,生成至 publish 文件夹底下。
reco build
-m, --minimize
选填;压缩 js 和 css 文件。
将 publish.zip 用 http request 方式上传到指定服务器
reco upload
-h
选填;指定服务器位址。
-u
选填;用户名称。
-p
选填;项目名称。
-o, --open
选填;上传完成后,自动开启浏览器进行预览。