第1回-基于react-weui構(gòu)建前端react開(kāi)發(fā)腳手架

本章小目標(biāo)

git clone react-weui并試運(yùn)行
構(gòu)建react開(kāi)發(fā)腳手架

0 前言

最近在使用react做一些東西，發(fā)現(xiàn)weui有react版本脖隶，很好用扁耐。可以拿官方的源碼作為一個(gè)react開(kāi)發(fā)的腳手架产阱。這篇文章的目標(biāo)就是讓腳手架跑起來(lái)

1 下載源碼

$ git clone https://github.com/weui/react-weui.git
$ cnpm install
$ cnpm start

目錄結(jié)構(gòu)參考github網(wǎng)站或源碼目錄婉称，這樣其實(shí)就已經(jīng)有一個(gè)基本的腳手架了。

2 安裝必要的npm包

上一步直接start是報(bào)錯(cuò)的构蹬，因?yàn)槿鄙俦匾陌醢担村e(cuò)誤提示安裝即可。

$ 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

接下來(lái)cnpm start可以啟動(dòng)了怎燥。

3 啟動(dòng)并訪(fǎng)問(wèn)demo

$ cnpm start

啟動(dòng)演示DEMO瘫筐，可訪(fǎng)問(wèn)地址：http://localhost:8080/

$ cnpm run startdoc

但是，startdoc時(shí)有報(bào)錯(cuò)如下：

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

其實(shí)應(yīng)該先執(zhí)行構(gòu)建铐姚，生成lib目錄，然后再打開(kāi)demo

$ cnpm run build
$ ls lib
components  index.js  react-weui.min.css  utils  version.js
$ cnpm  run startdoc

再次啟動(dòng)OK肛捍。
訪(fǎng)問(wèn)演示文檔隐绵，可訪(fǎng)問(wèn)地址：http://localhost:8080/
將看到一個(gè)漂亮的首頁(yè)（偷懶的話(huà)，就拿來(lái)改一改）拙毫，哇哦～

image.png

4 創(chuàng)建自己的APP

接下來(lái)就通過(guò)簡(jiǎn)單的改造依许，構(gòu)建自己的APP腳手架。
到目前為止缀蹄，目錄結(jié)構(gòu)如下

$ 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 創(chuàng)建APP目錄

仿照docs和example峭跳，在旁邊建一個(gè)APP目錄，名稱(chēng)為hi_weui

$ mkdir hi_weui
$ cat hi_weui.js   #寫(xiě)一段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  #寫(xiě)一個(gè)html頁(yè)面作為入口
<!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 創(chuàng)建APP對(duì)應(yīng)的webpack配置文件

修改現(xiàn)有的配置文件即可

$ 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 #對(duì)應(yīng)位置增加下面兩行
"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編譯構(gòu)建程序

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  #打開(kāi)網(wǎng)頁(yè)

4.4.2 熱開(kāi)發(fā)模式

$ cnpm run start:hi_weui

訪(fǎng)問(wèn)：http://localhost:8080/
這個(gè)時(shí)候缺前，可以實(shí)時(shí)修改js文件蛀醉，實(shí)時(shí)在瀏覽器中看到修改的效果

$ vim hi_weui.js
<Button>hi weui modified online!</Button>