備注：本demo采用es6語法，所以，會面臨轉(zhuǎn)碼的問題，其次，轉(zhuǎn)碼之后，僅僅是轉(zhuǎn)換成了es5的語法，比如依賴包使用require加載，所以會存在引用amd或者cmd庫的問題，解決方案如下
1.轉(zhuǎn)碼使用babel;
2.模塊化使用webpack解決。
基本配置
1.npm install
用于初始化package.json,本demo如下
{
"name": "redux-demo",
"version": "1.0.0",
"description": "This is a redux demo",
"main": "index.js",
"scripts": {
"test": "npm run start"
},
"repository": {
"type": "git",
"url": "git+https://github.com/chenbin2015/reduxDemo.git"
},
"keywords": [
"react",
"redux"
],
"author": "chenbin",
"license": "MIT",
"bugs": {
"url": "https://github.com/chenbin2015/reduxDemo/issues"
},
"homepage": "https://github.com/chenbin2015/reduxDemo#readme",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^5.0.3",
"redux": "^3.6.0"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.23.0",
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"webpack": "^2.2.1"
}
}
2.新增index.html，其中的js是經(jīng)過babel轉(zhuǎn)碼，webpack打包之后的js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="./build/index.js"></script>
</body>
</html>
3.新增index.js,這是整個項目的入口文件，代碼如下
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import reducers from '../reducer'
const store = createStore(reducers)
const rootEl = document.getElementById('root')
const render = () => ReactDOM.render(
<div>Hello world</div>,
rootEl
)
render()
其中的前三行都是基本的依賴，第四行是自己實現(xiàn)的reducers
4.再來看看.babelrc的配置，如下
{
"presets": ["es2015", "stage-0", "react"]
}
可以看到，這是一個json對象，且只有一個字段presets,它是用來設(shè)定轉(zhuǎn)碼規(guī)則的，代表的意思摘抄自阮老師的博文
# ES2015轉(zhuǎn)碼規(guī)則
$ npm install --save-dev babel-preset-es2015
# react轉(zhuǎn)碼規(guī)則
$ npm install --save-dev babel-preset-react
# ES7不同階段語法提案的轉(zhuǎn)碼規(guī)則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
5.接下來看看webpack的配置，最簡單的配置，僅僅為了跑hello world
module.exports={
entry:'./dist/index.js',
output:{
filename:'index.js',
path:'./build'
}
}
6.結(jié)果如下，具體代碼請猛戳這里
Paste_Image.png
