本章小目標
- git clone react-weui并試運行
- 構建react開發腳手架
0 前言
最近在使用react做一些東西，發現weui有react版本，很好用。可以拿官方的源碼作為一個react開發的腳手架。這篇文章的目標就是讓腳手架跑起來
1 下載源碼
官方github clone源碼
$ git clone https://github.com/weui/react-weui.git
$ cnpm install
$ cnpm start
目錄結構參考github網站或源碼目錄，這樣其實就已經有一個基本的腳手架了。
2 安裝必要的npm包
上一步直接start是報錯的，因為缺少必要的包，按錯誤提示安裝即可。
$ cnpm install --save react react-dom
$ cnpm install --save weui@1.1.0 react-weui
$ cnpm install --save webpack-dev-server
$ cnpm install --save webpack
$ cnpm install --save autoprefixer
$ cnpm install --save html-webpack-plugin
$ cnpm install --save extract-text-webpack-plugin
$ cnpm install --save open-browser-webpack-plugin
$ cnpm install --save fbjs
接下來cnpm start可以啟動了。
3 啟動并訪問demo
$ cnpm start
啟動演示DEMO，可訪問地址：http://localhost:8080/
$ cnpm run startdoc
但是，startdoc時有報錯如下：
ERROR in ./docs/pages/docs.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../../lib/react-weui.min.css in /home/bit/git_app/react-weui/docs/pages
@ ./docs/pages/docs.js 59:0-39
ERROR in ./docs/pages/docs.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../../lib in /home/bit/git_app/react-weui/docs/pages
@ ./docs/pages/docs.js 55:11-31
其實應該先執行構建，生成lib目錄，然后再打開demo
$ cnpm run build
$ ls lib
components index.js react-weui.min.css utils version.js
$ cnpm run startdoc
再次啟動OK。
訪問演示文檔，可訪問地址：http://localhost:8080/
將看到一個漂亮的首頁（偷懶的話，就拿來改一改），哇哦～
4 創建自己的APP
接下來就通過簡單的改造，構建自己的APP腳手架。
到目前為止，目錄結構如下
$ tree -L 1
.
├── CHANGELOG.md
├── CONTRIBUTING.md
├── dist
├── docs
├── example
├── lib
├── node_modules
├── package.json
├── README.md
├── src
├── test
├── webpack.config.doc.js
├── webpack.config.js
└── webpack.config.prod.js
4.1 創建APP目錄
仿照docs和example，在旁邊建一個APP目錄，名稱為hi_weui
$ mkdir hi_weui
$ cat hi_weui.js #寫一段js代碼
// hi_weui.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
//import Using ES6 syntax
import WeUI from 'react-weui';
//import styles
import 'weui';
import 'react-weui/lib/react-weui.min.css';
const {Button} = WeUI;
class App extends Component {
render() {
return (
<Button>hi weui</Button>
);
}
}
ReactDOM.render((
<App/>
), document.getElementById('container'));
$ cat index.html #寫一個html頁面作為入口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>hi_weui</title>
</head>
<body ontouchstart>
<div class="container" id="container"></div>
</body>
</html>
4.2 創建APP對應的webpack配置文件
修改現有的配置文件即可
$ cp webpack.config.js webpack.config.hi_weui.js
$ diff webpack.config.js webpack.config.hi_weui.js
9c9
< context: path.join(__dirname, 'example'),
---
> context: path.join(__dirname, 'hi_weui'),
11c11
< js: ['./app.js'],
---
> js: ['./hi_weui.js'],
15c15
< path: path.resolve(__dirname, 'dist'),
---
> path: path.resolve(__dirname, 'dist_hi_weui'),
51c51
< template: path.join(__dirname, 'example/index.html')
---
> template: path.join(__dirname, 'hi_weui/index.html')
4.3 修改package.json文件
$ cat package.json #對應位置增加下面兩行
"start:hi_weui": "webpack-dev-server --config webpack.config.hi_weui.js --hot --inline --progress --colors --port 8080",
"build:hi_weui": "rimraf ./dist/docs && webpack --config webpack.config.hi_weui.js --progress --colors -p",
4.4 使用webpack編譯構建程序
4.4.1 編譯模式
$ cnpm run build:hi_weui
$ cd dist_hi_weui
$ tree
.
├── bundle.js
├── index.html
├── vendor.bundle.js
└── weui.min.css
0 directories, 4 files
$ firefox index.html #打開網頁
4.4.2 熱開發模式
$ cnpm run start:hi_weui
訪問：http://localhost:8080/
這個時候，可以實時修改js文件，實時在瀏覽器中看到修改的效果
$ vim hi_weui.js
<Button>hi weui modified online!</Button>
5 結語
整個過程還是比較簡單的。這個腳手架用到了許多東西，可以暫時不糾結里面的細節，等需要的時候再去了解。
下一回預告，介紹在Django框架下使用這個react腳手架的方法
