#Web 项目工程 Demo
使用React & Webpack
- 安装node.js.
环境需要安装。
- 安装Webpack
用npm安装webpack
npm install webpack -g参数-g表示全局(global)安装 webpack，这样就可以直接使用webpack命令了。
webpack有一个web服务器，基于node.js创建一个本地服务器。
npm install webpack-dev-server -g- webpack 配置文件
首先我们需要确定web项目结构，app/目录为存放我们的入口脚本文件 -app.js，webpack打包它到build/目录下的bundle.js，配置文件放在项目的根目录下，webpack.config.js配置如下：
// webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'app/app.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
}
}在app/目录下创建js文件app.js，内容如下：
document.writeln('It works!');在build/目录下创建一个HTML文件index.html，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="/favicon.ico">
<title>搭建Web工程Demo</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>基本步骤完成到这边完成，使用命令webpack进行打包，会在build/下生成bundle.js，使用命令webpack-dev-server启动服务，
浏览器访问http://localhost:8080/build/index.html，成功后可以看到输出It works!。
- 配置package.json
这个是node.js的配置文件，我们可以使用以下命令进行项目的初始化
npm init修改script的键值如下：
"script":{
"build": "webpack",
"start": "webpack-dev-server"
}使用命令npm run build（相当于使用了webpack）命令，使用npm run start（相当于使用了webpack-dev-server）命令。
- 安装React：
npm install react react-dom -save-dev- 安装jQuery来做AJAX的请求
npm install jquery --save-安装Babel的loader来支持ES6的语法：
npm install babel-core babel-loader babel-preset-2015 babel-preset-react --save-dev以前Facebook有个jsx的语法，现在已经给Babel来解析了
安装完成后修改webconfig.config.js，使用babel。
// webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'app/app.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015','react']
}
},
]
}
};测试webpack&react开发环境
修改app/app.js，修改如下：
// app.js
import $ from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
class HelloWorld extends React.Component {
render() {
return (
<div>Hello World</div>
);
}
}
ReactDOM(<HelloWorld />, $('#content')[0]);该js将html中元素（id为content）进行React的渲染，因此我们还需要在build/index.html加入元素，并且元素id为
content，修改如下
...
<body>
<div id="content"></div>
<script src="./bundle.js"></script>
</body>
...重新打包，刷新页面http://localhost:8080/build/index.html，可以看到我们的页面输出了Hello World。
以上完结了初始化的构建
npm install create-react-app --save-dev- 入口文件修改
var path = require('path');
var glob = require('glob');
/**
* webpack 入口文件键值堆
* @param root 项目工程路径
* @returns {{}}
*/
function getExports(root) {
var files = glob.sync(root);
var entries = {}, entry, dirname, basename;
files.forEach(function (file) {
entry = file;
dirname = path.dirname(entry);
basename = path.basename(entry, '.js');
entries[path.join(dirname, basename)] = entry;
});
return entries;
};
...
module.exports ={
entry: Object.assign({}, getExports("./app/**/*.js"), {common: ['jquery', 'bootstrap']}),
...
}
以上会根据目录生成对应的目录结构。
Redux英文网站，也可以查看中文Redux中文。
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
注意，与React无直接关联。
- 流程
