前期准备
1.安装Node Node 安装地址
2.通过NPM 全局安装Webpack。命令:npm install -g webpack
简易Demo搭建及说明
1.创建目录结构
创建如下目录：
目录说明:
build:用于存放经过webpack打包后的js文件
jsx:用于存放实际开发编写的jsx文件(即实际开发的js代码都写在这个目录下的文件中)
2.生成 package.json文件
在命令行输入 npm init 生成package.json文件,按照提示输入相关信息，生成文件如下：
{
"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"
}
该文件是包依赖管理的描述性文件，用于管理项目中通过NPM安装的依赖。
生成package.json后目录结构如下:
3.创建webpack.config.js文件
在frontDemo下创建webpack.config.js，内容如下:
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打包处理后输出的文件位置和名称。结合上面的例子，就是webpack在处理./jsx/index.jsx后，会在./build/目录下生成一个index.js（[name]对应于entry中的key）的文件。
loaders:下面大致的意思是，从入口文件中引入的模块(通过require或者import),后缀为js或者jsx的文件都经过babel loader处理( node_modules的除外)。因为我们我们的代码是es6和jsx风格的代码，所以需要在query中使用es2015和react来进行转换。
4.创建html,jsx文件，并安装相关依赖
现在开始创建jsx,html文件。
1.在创建html的文件中加入刚刚webpack输出的js，index.html内容如下:
<!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文件夹下创建index.jsx，添加内容如下(里面涉及到相关的React内容和es6语法，不熟悉的可以通过查阅参考文献进行相关的学习):
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')
);
因为这里引入了React和ReactDOM，所以我们需要通过npm来安装相关的依赖，使得webpack在打包处理的时候可以引用到这些依赖的模块,在package.json所在的目录下运行以下两条命令:
npm install react --save
npm install react-dom --save
这样，打开package.json，你就会看到如下内容：
{
"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"
+ }
}
加号对应的行为新添加的内容，说明依赖的模块react,react-dom已经安装到该项目中了,注意，必须使用--save 才会将依赖的信息写到package.json中，自己独立开发的项目，不加--save写入到package.json也许不会出现错误，但是当别人下载你的项目开发就会发生错误。不过无论如何，自己开发还是团队项目，使用--save将依赖写入到依赖描述文件中，是更好的选择和习惯。
5.运行webpack，在build目录下生成目标js
此时，我们就可以在webpack.config.js所在的目录下运行webpack，来生成浏览器端js引擎可以识别的目标文件了，你只需要打命令webpack，webpack就会在该目录下找webpack.config.js，根据这个js下的文件来打包处理对应的文件了。输入命令后，你会发现有如下错误：
这是因为，webpack里面使用的loader，也是开发相关的依赖，也需要通过npm来安装到该项目中来，命令如下：
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应多了如下内容:
{
"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时，添加的参数是--save-dev，而不是--save。因为我们这里加进来的依赖是属于开发中需要的依赖，实际项目运行并不需要这些依赖，所以将其放在devDependencies，加以区分，方便管理。
这时候，你再运行webpack,就会发现如下信息：
说明webpack已经成功输出目标js，此时目录结构如下：
build目录下，已经生成了index.js,在浏览器中打开index.html，如果在页面中看到如下字样：
hello,this is first demo
说明你已经成功使用webpack打包处理输出了目标文件。
在实际开发的时候，你或许在jsx文件中修改了某个字段，就想马上刷新浏览器，看到实际的效果，但是又不想重复输入命令webpack来打包处理，那你可以试试这个命令：
webpack --progress --colors --watch
该命令会启动一个常驻进程，实时监测jsx文件的变化并更新对应的目标文件。
6.使用React-Bootstrap
React-Bootstrap是Bootsrap项目使用React重写而成的中后台前端页面框架，非常适合迅速开发相关后台界面。话不多说，使用npm来将其安装到本项目中：
npm install react-bootstrap --save
在index.html中引入相关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" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<body>
<div id="main">
</div>
<script src="build/index.js" type="text/javascript"></script>
</body>
</html>
其实也可以像引入js那样在js代码中引入css，只需要在webpack中加入style-css loader即可，不过这里不再给出例子。
然后，查阅React-Bootstrap Components,将需要的组件引入并放在你想要它出现的位置即可，以Bootstrap 导航栏为例，修改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')
);
在浏览器中打开页面，看到如下页面：
参考文献中包含了React，es6语法等技术框架的相关文献，有需要的可以参阅。
网友评论