利用React-router+Webpack快速構(gòu)建react程序

更新時(shí)間：2016年10月27日 09:05:00 投稿：daisy

目前 React、Webpack 等技術(shù)如火如荼，你是不是還在愁苦如何把這些雜亂的知識(shí)怎么學(xué)習(xí)一下，開(kāi)啟一段新的前端開(kāi)發(fā)之路呢？那么這篇將給大家運(yùn)用示例代碼詳細(xì)的介紹使用React-router和Webpack如何快速構(gòu)建一個(gè)react程序，感興趣的朋友們下面來(lái)一起看看吧。

本文主要介紹的是使用React-router和Webpack如何快速構(gòu)建一個(gè)react程序，下面話不多說(shuō)，感興趣的可以一起學(xué)習(xí)學(xué)習(xí)。

初始化項(xiàng)目

我們先創(chuàng)建個(gè)空文件夾，然后初始化 package.json ,填寫一些基本信息。

$ npm init

接下來(lái)我們開(kāi)始安裝依賴項(xiàng)，我的 package.json 的依賴項(xiàng)如下

 "devDependencies": {
 "babel": "^5.5.6",
 "babel-core": "^5.5.6",
 "babel-loader": "^5.1.4",
 "history": "^1.13.1",
 "react": "^0.13.3",
 "react-hot-loader": "^1.2.7",
 "react-router": "^0.13.3",
 "webpack": "^1.12.6",
 "webpack-dev-server": "^1.12.1"
 }

運(yùn)行命令:

$ npm install

項(xiàng)目創(chuàng)建好后，我們接下來(lái)創(chuàng)建一些必要的文件和目錄；

$ mkdir js css && touch index.html webpack.config.js

webpack

webpack 是一款模塊處理器，他會(huì)將你所有的代碼打包成靜態(tài)文件，放到你的開(kāi)發(fā)的App中。

打開(kāi)webpack.config.js，然后添加下面的代碼:

var webpack = require('webpack'); 
module.exports = { 
 entry: [
  'webpack/hot/only-dev-server',
  "./js/app.js"
 ],
 output: {
  path: __dirname + '/build',
  filename: "bundle.js"
 },
 module: {
  loaders: [
   { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
   { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
   { test: /\.css$/, loader: "style!css" }
  ]
 },
 plugins: [
  new webpack.NoErrorsPlugin()
 ]
};

這份文件大概有四個(gè)配置項(xiàng)entry, output, module,plugins.

entry:指定打包的入口文件，每有一個(gè)鍵值對(duì)，就是一個(gè)入口文件。

output：配置打包結(jié)果，path定義了輸出的文件夾，filename則定義了打包結(jié)果文件的名稱，filename里面的[name]會(huì)由entry中的鍵替換,例子中的/build/bundle.js便是生成的文件。

resolve：定義了解析模塊路徑時(shí)的配置，常用的就是extensions，可以用來(lái)指定模塊的后綴，這樣在引入模塊時(shí)就不需要寫后綴了，會(huì)自動(dòng)補(bǔ)全.

module：定義了對(duì)模塊的處理邏輯，這里可以用loaders定義了一系列的加載器，以及一些正則。當(dāng)需要加載的文件匹配test的正則時(shí)，就會(huì)進(jìn)行處理。這里我們使用了react-hot 和 babel。babel-loader是我們使用ES-6進(jìn)行開(kāi)發(fā)時(shí)用于生成JS文件。最后我們生成了一個(gè)style.css僅僅做個(gè)例子，告訴我們?nèi)绾我霕邮轿募瑢?shí)際上我們可以加載諸如sass-loader這樣的加載器。

loader對(duì)文件進(jìn)行處理，這正是webpack強(qiáng)大的原因。比如這里定義了凡是.js結(jié)尾的文件都是用babel-loader做處理，而.jsx結(jié)尾的文件會(huì)先經(jīng)過(guò)jsx-loader處理，然后經(jīng)過(guò)babel-loader處理。當(dāng)然這些loader也需要通過(guò)npm install安裝。

plugins: 這里定義了需要使用的插件，比如commonsPlugin在打包多個(gè)入口文件時(shí)會(huì)提取出公用的部分，生成common.js。

NoErrorsPlugin: 定義代碼出現(xiàn)錯(cuò)誤時(shí)的時(shí)受否自動(dòng)重新加載。

這個(gè)時(shí)候我們?cè)賞ackage.json中加入script 字段，

"scripts": {
 "start": "webpack-dev-server --hot --progress --colors",
 "build": "webpack --progress --colors"
 }

這個(gè)時(shí)候我們輸入一個(gè)npm start命令時(shí)候我們會(huì)啟動(dòng)一個(gè)webpack server這個(gè)時(shí)候你可以訪問(wèn)localhost:8080/webpack-dev-server/#/;如果你使用npm run build時(shí)候可以將文件自動(dòng)生成到bulid/下。

接下來(lái)我們新建index.html文件

<!doctype html> 
<html lang="en"> 
 <head>
 <meta charset="utf-8">
 <title>New React App</title>
 </head>
 <body>
 <section id="react"></section>
 <script src="bundle.js"></script>
 </body>
</html>

現(xiàn)在我們?cè)L問(wèn)瀏覽器可以便會(huì)引進(jìn)新創(chuàng)建的bundle.js,實(shí)際上你可以引進(jìn)任何你想要的資源。

React-router

完成項(xiàng)目的基本創(chuàng)建，接下來(lái)我們創(chuàng)建app.js項(xiàng)目的入口文件。

代碼如下:

import React from 'react'; 
import Router from 'react-router'; 
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';

import LoginHandler from './components/Login.js';

let App = React.createClass({ 
 render() {
 return (
  <div className="nav">
  <Link to="app">Home</Link>
  <Link to="login">Login</Link>

  {/* this is the importTant part */}
  <RouteHandler/>
  </div>
 );
 }
});

let routes = ( 
 <Route name="app" path="/" handler={App}>
 <Route name="login" path="/login" handler={LoginHandler}/>
 </Route>
);

Router.run(routes, function (Handler) { 
 React.render(<Handler/>, document.body);
});

文章頭部是我們將要用的react和react-router的插件包引進(jìn)來(lái)。同事我們還引入login.js作為我們的Login React 組件。接著，我們使用React 創(chuàng)建一個(gè)類。這個(gè)例子中，其實(shí)就是一個(gè)簡(jiǎn)單的導(dǎo)航條會(huì)出現(xiàn)所有的子組件中。我們簡(jiǎn)單的Link到我們的路由:App和Login.然后React route將會(huì)被RouteHandler組件初始化。

在這個(gè)App中，我們定義路由并且指定了相應(yīng)的處理程序（React 組件）。我們定義了我們的根路徑為app，并且其他的地址將會(huì)是App的子組件。這個(gè)例子中，我們添加了一個(gè)登錄頁(yè)面，用于用戶登錄到App中。

最后，React-router會(huì)將我們定義的一切加載到document.body中來(lái)。這就是index.html轉(zhuǎn)變成我們React App.

Components

弄到這了，我們需要添加組件(Components).在我們的 /js 目錄下，我們需要開(kāi)始創(chuàng)建組件。

我們創(chuàng)建Login.js：

import React from 'react';

let Login = React.createClass({ 

 render() {
 return(<div>Welcome to login</div>);
 }
});

export default Login;

其實(shí)那只是一個(gè)非常簡(jiǎn)單的組件，內(nèi)容為顯示"Welcaome to Login"。這個(gè)時(shí)候我們可以運(yùn)行下我們的app。npm start 然后訪問(wèn)http://localhost:8080/webpack-dev-server/#

這個(gè)時(shí)候，你可以見(jiàn)到一個(gè)導(dǎo)航條上有兩個(gè)鏈接Home 和 Login.如果點(diǎn)擊Login這個(gè)時(shí)候可以顯示我們剛剛創(chuàng)建的內(nèi)容。

如果上面一切順利，那么現(xiàn)在你可以自己創(chuàng)建更多內(nèi)容來(lái)充實(shí)自己App.如果你項(xiàng)目中使用Flux，你可以在你的js 文件夾下使用任何結(jié)構(gòu)。

發(fā)布

實(shí)際上我們有很多方法可以上線你的服務(wù)，但是非常好的一件事情是webpack 可以輕松的使用生成的文件。其中你可以快速的將這些資源文件放到cdn上，然后將index.html放到主機(jī)上，更新我們的腳本路徑就可以了。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: