一、初始化項目
首先確保你的node 版本 >=4.0.並且確保yarn可以正常工作，關於安裝yarn，你可以看這裡
我們先建立個空檔案夾 比如yarn-react-webpack-seed,然後輸入命令：
yarn init
yarn 如果沒有安裝，全程用 npm代替也沒問題。
項目會初始化 package.json ,然後填寫一些基本資料即可。
接下來我們開始安裝依賴項，再 package.json 的添加下面內容
"dependencies": { "react": "^15.4.0-rc.4", "react-dom": "^15.3.2", "react-router": "^2.8.1" }, "devDependencies": { "babel": "^6.5.2", "babel-core": "^6.17.0", "babel-loader": "^6.2.5", "babel-preset-es2015": "^6.16.0", "babel-preset-react": "^6.16.0", "history": "^4.3.0", "react-hot-loader": "^3.0.0-beta.6", "webpack": "^1.13.2", "webpack-dev-server": "^1.16.2" },
運行命令:
yarn install
你也可以自行添加依賴，輸入yarn add xxx即可。
yarn add react yarn add webpack --dev ...
項目建立好後，我們接下來建立一些必要的檔案和目錄；
+ build+ src- webpack.config.js- package.json- index.html- server.js
二、webpack
webpack （更多）是一款模組處理器，他會將你所有的代碼打包成靜態檔案，放到你的開發的App中。
開啟webpack.config.js，然後添加下面的代碼:
var webpack = require('webpack');module.exports = { entry: [ "webpack-dev-server/client?http://localhost:9000", 'webpack/hot/only-dev-server', "./src/index" ], output: { path: __dirname + '/build', filename: "bundle.js", publicPath: '/build/', }, module: { loaders: [ { test: /\.js?$/, loaders: ["react-hot-loader/webpack",'babel-loader?presets[]=react,presets[]=es2015'], exclude: /node_modules/ }, { test: /\.less$/, loader: "style!css!less" } ] }, plugins: [ new webpack.NoErrorsPlugin(), new webpack.HotModuleReplacementPlugin() ]};
這份檔案大概有四個配置項entry, output, module,plugins.
entry:指定打包的入口檔案，每有一個索引值對，就是一個入口檔案。
output：配置打包結果，path定義了輸出的檔案夾，filename則定義了打包結果檔案的名稱，filename裡面的[name]會由entry中的鍵替換,例子中的/build/bundle.js便是產生的檔案。
module：定義了對模組的處理邏輯，這裡可以用loaders定義了一系列的載入器，以及一些正則。當需要載入的檔案匹配test的正則時，就會進行處理。這裡我們使用了react-hot 和 babel。babel-loader是我們使用ES-6進行開發時用於產生JS檔案。
loader對檔案進行處理，這正是webpack強大的原因。比如這裡定義了凡是.js結尾的檔案都是用babel-loader做處理，而.jsx結尾的檔案會先經過jsx-loader處理，然後經過babel-loader處理。yarn add添加這些外掛程式。babel中的preset配置你也可以.babelr檔案中定義：
{ "presets": [ "es2015", "react"],}
plugins: 這裡定義了需要使用的外掛程式，比如commonsPlugin在打包多個入口檔案時會提取出公用的部分，產生common.js。
這個時候我們再package.json中加入script 欄位，
"scripts": { "start": "node server.js", "build": "webpack --progress --colors" }
這個時候我們輸入一個yarn start命令時候我們會啟動一個webpack server這個時候你可以訪問 http://localhost:9000/ 看到我們的頁面了; 如果你使用yarn run build時候可以將檔案自動產生到bulid/下。
接下來我們建立index.html檔案
<!doctype html> <html lang="en" > <head> <meta charset="UTF-8"> <title>React+React-Router+Webpack+Yarn Seed</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> </head> <body > <div id="app"></div> <script src="./build/bundle.js"></script> </body> </html>
在index.html中最重要的是引入 bundle.js,實際上index.html你可以隨意修改任何代碼，重要是的引入產生後的檔案以及含有react渲染的DOM。
三、React-router
完成項目的基本建立，接下來我們建立src/index.js項目的入口檔案。代碼如下:
import React from 'react'; import ReactDOM from 'react-dom'; import App from './app';ReactDOM.render(<App />, document.getElementById('app'));
接下來我們再建立一些包含路由群組件的檔案src/app.js
import React, { Component } from 'react'; import { render } from 'react-dom'; import { Router, Route, hashHistory } from 'react-router'; // componentsimport Links from './components/links.js'; import Start from './components/start.js'; import Guide from './components/guide.js'; import How from './components/how.js';class App extends Component { render() { return ( <Router history={hashHistory}> <Route path="/" component={Links}> <Route path="/start" component={Start}/> <Route path="/how" component={How}/> <Route path="/guide" component={Guide}/> </Route> </Router> ); }}export default App;
頭部是我們將要用的react和react-router的模組引進來。 同時我們把用到的組件Links,Start,Guide等引進來。然後我們需要配置router
在Route中設定具體的path 和組件。
接下來我們看看如何進行路由的切換，這些內容存放到src/components/links.js中。
import React from 'react'; import { Link } from 'react-router' let Links = React.createClass({ render() { return( <div> <aside> <h4>Categories</h4> <ul role="nav"> <li><Link to="/start" activeStyle={{color:'#3498db'}}>Start</Link></li> <li><Link to="/how" activeStyle={{color:'#3498db'}}>How</Link></li> <li><Link to="/guide" activeStyle={{color:'#3498db'}}>Guide</Link></li> </ul> </aside> <div className="page main"> {this.props.children} </div> </div> ); }});export default Links;
在Link 中我們可以指定具體的路由地址。
剩下的就是添加組件了，比如我們添加一個簡單的start.js到components下面。
import React from 'react';let Start = React.createClass({ render() { return( <div className="c-home"> <img alt="guide" src="yun_qi_img/vuedd144134a46129d7068d36025d64ba905.png" /> <h4>React+React-Router+Webpack+Yarn Seed</h4> </div> ); }});export default Start;
其他的組件代碼就不詳細展示了。
這個時候我們輸入yarn run build,我們可以看到build下會產生一個bundle.js 檔案。 如果輸入 yarn run start就可以看見頁面了
本地輸入 yarn start 然後訪問 http://localhost:9000 就可以看到自己寫的內容了。
關於React-Router的更多配置，可以參考官方文檔的教程。
四、發布
實際上我們有很多方法可以上線你的服務，但是非常好的一件事情是webpack 可以輕鬆的使用產生的檔案。其中你可以快速的將這些資源檔放到cdn上，然後將index.html放到主機上，更新我們的指令碼路徑就可以了。
這次改變用yarn的安裝速度確實比原來npm快了很多幾乎都是10s內就完成了。不需要長時間等待或者切換taobao npm 鏡像。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
