前期準(zhǔn)備
1.安裝Node Node 安裝地址
2.通過NPM 全局安裝Webpack柬唯。命令:npm install -g webpack
簡(jiǎn)易Demo搭建及說明
1.創(chuàng)建目錄結(jié)構(gòu)
創(chuàng)建如下目錄：
目錄說明:
build:用于存放經(jīng)過webpack打包后的js文件
jsx:用于存放實(shí)際開發(fā)編寫的jsx文件(即實(shí)際開發(fā)的js代碼都寫在這個(gè)目錄下的文件中)
2.生成 package.json文件
在命令行輸入 npm init 生成package.json文件,按照提示輸入相關(guān)信息，生成文件如下：
{
"name": "frontdemo",
"version": "1.0.0",
"description": "front demo project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "http:/xx.xx.xx"
},
"keywords": [
"demo",
"front"
],
"author": "wuqke",
"license": "ISC"
}
該文件是包依賴管理的描述性文件睬捶，用于管理項(xiàng)目中通過NPM安裝的依賴伟叛。
生成package.json后目錄結(jié)構(gòu)如下:
3.創(chuàng)建webpack.config.js文件
在frontDemo下創(chuàng)建webpack.config.js，內(nèi)容如下:
module.exports = {
entry: {
index: './jsx/index.jsx',
},
output: {
filename: './build/[name].js'
},
module: {
loaders: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ["es2015", "react"]
}
},
]
}
};
屬性說明:
entry：需要通過webpack打包處理的入口文件
output:webpack打包處理后輸出的文件位置和名稱。結(jié)合上面的例子藻烤，就是webpack在處理./jsx/index.jsx后，會(huì)在./build/目錄下生成一個(gè)index.js（[name]對(duì)應(yīng)于entry中的key）的文件。
loaders:下面大致的意思是怖亭，從入口文件中引入的模塊(通過require或者import),后綴為js或者jsx的文件都經(jīng)過babel loader處理( node_modules的除外)涎显。因?yàn)槲覀兾覀兊拇a是es6和jsx風(fēng)格的代碼，所以需要在query中使用es2015和react來進(jìn)行轉(zhuǎn)換兴猩。
4.創(chuàng)建html,jsx文件期吓，并安裝相關(guān)依賴
現(xiàn)在開始創(chuàng)建jsx,html文件。
1.在創(chuàng)建html的文件中加入剛剛webpack輸出的js倾芝，index.html內(nèi)容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Front Demo</title>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<body>
<div id="main">
</div>
<script src="build/index.js" />
</body>
</html>
2.在jsx文件夾下創(chuàng)建index.jsx讨勤，添加內(nèi)容如下(里面涉及到相關(guān)的React內(nèi)容和es6語(yǔ)法，不熟悉的可以通過查閱參考文獻(xiàn)進(jìn)行相關(guān)的學(xué)習(xí)):
import React from 'react';
import ReactDOM from 'react-dom';
class MainContentComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
hello,this is first demo
</div>
);
}
}
ReactDOM.render(
<MainContentComponent/>,
document.getElementById('main')
);
因?yàn)檫@里引入了React和ReactDOM晨另，所以我們需要通過npm來安裝相關(guān)的依賴潭千，使得webpack在打包處理的時(shí)候可以引用到這些依賴的模塊,在package.json所在的目錄下運(yùn)行以下兩條命令:
npm install react --save
npm install react-dom --save
這樣，打開package.json借尿，你就會(huì)看到如下內(nèi)容：
{
"name": "frontdemo",
"version": "1.0.0",
"description": "front demo project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "http:/xx.xx.xx"
},
"keywords": [
"demo",
"front"
],
"author": "wuqke",
"license": "ISC",
+ "dependencies": {
+ "react": "^15.3.2",
+ "react-dom": "^15.3.2"
+ }
}
加號(hào)對(duì)應(yīng)的行為新添加的內(nèi)容刨晴，說明依賴的模塊react,react-dom已經(jīng)安裝到該項(xiàng)目中了,注意，必須使用--save 才會(huì)將依賴的信息寫到package.json中垛玻，自己獨(dú)立開發(fā)的項(xiàng)目割捅，不加--save寫入到package.json也許不會(huì)出現(xiàn)錯(cuò)誤，但是當(dāng)別人下載你的項(xiàng)目開發(fā)就會(huì)發(fā)生錯(cuò)誤帚桩。不過無論如何亿驾，自己開發(fā)還是團(tuán)隊(duì)項(xiàng)目，使用--save將依賴寫入到依賴描述文件中账嚎，是更好的選擇和習(xí)慣莫瞬。
5.運(yùn)行webpack，在build目錄下生成目標(biāo)js
此時(shí)郭蕉，我們就可以在webpack.config.js所在的目錄下運(yùn)行webpack疼邀，來生成瀏覽器端js引擎可以識(shí)別的目標(biāo)文件了，你只需要打命令webpack召锈，webpack就會(huì)在該目錄下找webpack.config.js旁振，根據(jù)這個(gè)js下的文件來打包處理對(duì)應(yīng)的文件了。輸入命令后涨岁，你會(huì)發(fā)現(xiàn)有如下錯(cuò)誤：
這是因?yàn)楣胀啵瑆ebpack里面使用的loader，也是開發(fā)相關(guān)的依賴梢薪，也需要通過npm來安裝到該項(xiàng)目中來蹬铺，命令如下：
npm install webpack --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
安裝完后,package.json應(yīng)多了如下內(nèi)容:
{
"name": "frontdemo",
"version": "1.0.0",
"description": "front demo project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "http:/xx.xx.xx"
},
"keywords": [
"demo",
"front"
],
"author": "wuqke",
"license": "ISC",
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2"
},
+ "devDependencies": {
+ "babel-core": "^6.17.0",
+ "babel-loader": "^6.2.5",
+ "babel-preset-es2015": "^6.16.0",
+ "babel-preset-react": "^6.16.0",
+ "webpack": "^1.13.2"
+ }
}
上面在使用npm install時(shí)，添加的參數(shù)是--save-dev秉撇，而不是--save甜攀。因?yàn)槲覀冞@里加進(jìn)來的依賴是屬于開發(fā)中需要的依賴秋泄，實(shí)際項(xiàng)目運(yùn)行并不需要這些依賴，所以將其放在devDependencies规阀，加以區(qū)分恒序，方便管理。
這時(shí)候谁撼，你再運(yùn)行webpack,就會(huì)發(fā)現(xiàn)如下信息：
說明webpack已經(jīng)成功輸出目標(biāo)js奸焙，此時(shí)目錄結(jié)構(gòu)如下：
build目錄下，已經(jīng)生成了index.js,在瀏覽器中打開index.html彤敛，如果在頁(yè)面中看到如下字樣：
hello,this is first demo
說明你已經(jīng)成功使用webpack打包處理輸出了目標(biāo)文件。
在實(shí)際開發(fā)的時(shí)候了赌，你或許在jsx文件中修改了某個(gè)字段墨榄，就想馬上刷新瀏覽器，看到實(shí)際的效果勿她，但是又不想重復(fù)輸入命令webpack來打包處理袄秩，那你可以試試這個(gè)命令：
webpack --progress --colors --watch
該命令會(huì)啟動(dòng)一個(gè)常駐進(jìn)程，實(shí)時(shí)監(jiān)測(cè)jsx文件的變化并更新對(duì)應(yīng)的目標(biāo)文件逢并。
6.使用React-Bootstrap
React-Bootstrap是Bootsrap項(xiàng)目使用React重寫而成的中后臺(tái)前端頁(yè)面框架之剧，非常適合迅速開發(fā)相關(guān)后臺(tái)界面。話不多說砍聊，使用npm來將其安裝到本項(xiàng)目中：
npm install react-bootstrap --save
在index.html中引入相關(guān)css文件背稼，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Front Demo</title>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
+ <link rel="stylesheet" >
<body>
<div id="main">
</div>
<script src="build/index.js" type="text/javascript"></script>
</body>
</html>
其實(shí)也可以像引入js那樣在js代碼中引入css，只需要在webpack中加入style-css loader即可玻蝌，不過這里不再給出例子蟹肘。
然后，查閱React-Bootstrap Components,將需要的組件引入并放在你想要它出現(xiàn)的位置即可俯树，以Bootstrap 導(dǎo)航欄為例帘腹，修改index.jsx代碼如下：
import React from 'react';
import ReactDOM from 'react-dom';
+import {Nav,Navbar,NavItem,NavDropdown,MenuItem} from 'react-bootstrap';
class MainContentComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
- <div>
- hello,this is first demo
- </div>
+ <Navbar inverse>
+ <Navbar.Header>
+ <Navbar.Brand>
+ <a href="#">React-Bootstrap</a>
+ </Navbar.Brand>
+ <Navbar.Toggle />
+ </Navbar.Header>
+ <Navbar.Collapse>
+ <Nav>
+ <NavItem eventKey={1} href="#">Link</NavItem>
+ <NavItem eventKey={2} href="#">Link</NavItem>
+ <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-+dropdown">
+ <MenuItem eventKey={3.1}>Action</MenuItem>
+ <MenuItem eventKey={3.2}>Another action</MenuItem>
+ <MenuItem eventKey={3.3}>Something else here</MenuItem>
+ <MenuItem divider />
+ <MenuItem eventKey={3.3}>Separated link</MenuItem>
+ </NavDropdown>
+ </Nav>
+ <Nav pullRight>
+ <NavItem eventKey={1} href="#">Link Right</NavItem>
+ <NavItem eventKey={2} href="#">Link Right</NavItem>
+ </Nav>
+ </Navbar.Collapse>
+ </Navbar>
);
}
}
ReactDOM.render(
<MainContentComponent/>,
document.getElementById('main')
);
在瀏覽器中打開頁(yè)面，看到如下頁(yè)面：
參考文獻(xiàn)中包含了React许饿，es6語(yǔ)法等技術(shù)框架的相關(guān)文獻(xiàn)阳欲，有需要的可以參閱。
