快捷導(dǎo)航

利用yarn實(shí)現(xiàn)一個(gè)webpack+react種子

更新時(shí)間：2016年10月25日 11:01:05 投稿：daisy

其實(shí)以前就寫(xiě)過(guò)如何使用React-router和Webpack快速構(gòu)建一個(gè)react程序。后來(lái)發(fā)現(xiàn)版本太老，于是乎最近又重新組織了下結(jié)構(gòu)，使用最近發(fā)布的yarn作為包管理工具,介紹下基本安裝步驟，有需要的朋友們下面來(lái)一起看看吧。

一、初始化項(xiàng)目

首先確保你的node 版本 >=4.0.并且確保yarn可以正常工作，關(guān)于安裝yarn，你可以看這里

我們先創(chuàng)建個(gè)空文件夾比如yarn-react-webpack-seed,然后輸入命令：

yarn init

yarn 如果沒(méi)有安裝，全程用 npm代替也沒(méi)問(wèn)題。

項(xiàng)目會(huì)初始化 package.json ,然后填寫(xiě)一些基本信息即可。

接下來(lái)我們開(kāi)始安裝依賴項(xiàng)，再 package.json 的添加下面內(nèi)容

"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"
 },

運(yùn)行命令:

yarn install

你也可以自行添加依賴，輸入yarn add xxx即可。

yarn add react 
yarn add webpack --dev 
...

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

+ build
+ src
- webpack.config.js
- package.json
- index.html
- server.js

二、webpack

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

打開(kāi)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()
 ]
};

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

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

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

module：定義了對(duì)模塊的處理邏輯，這里可以用loaders定義了一系列的加載器，以及一些正則。當(dāng)需要加載的文件匹配test的正則時(shí)，就會(huì)進(jìn)行處理。這里我們使用了react-hot 和 babel。babel-loader是我們使用ES-6進(jìn)行開(kāi)發(fā)時(shí)用于生成JS文件。

loader對(duì)文件進(jìn)行處理，這正是webpack強(qiáng)大的原因。比如這里定義了凡是.js結(jié)尾的文件都是用babel-loader做處理，而.jsx結(jié)尾的文件會(huì)先經(jīng)過(guò)jsx-loader處理，然后經(jīng)過(guò)babel-loader處理。yarn add添加這些插件。babel中的preset配置你也可以.babelr文件中定義：

{
 "presets": [ "es2015", "react"],
}

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

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

"scripts": {
 "start": "node server.js",
 "build": "webpack --progress --colors"
 }

這個(gè)時(shí)候我們輸入一個(gè)yarn start命令時(shí)候我們會(huì)啟動(dòng)一個(gè)webpack server這個(gè)時(shí)候你可以訪問(wèn) http://localhost:9000/ 看到我們的頁(yè)面了; 如果你使用yarn run build時(shí)候可以將文件自動(dòng)生成到bulid/下。

接下來(lái)我們新建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,實(shí)際上index.html你可以隨意修改任何代碼，重要是的引入生成后的文件以及含有react渲染的DOM。

三、React-router

完成項(xiàng)目的基本創(chuàng)建，接下來(lái)我們創(chuàng)建src/index.js項(xiàng)目的入口文件。代碼如下:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './app';

ReactDOM.render(<App />, document.getElementById('app'));

接下來(lái)我們?cè)賱?chuàng)建一些包含路由組件的文件src/app.js

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, hashHistory } from 'react-router'; 
// components
import 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的模塊引進(jìn)來(lái)。同時(shí)我們把用到的組件Links,Start,Guide等引進(jìn)來(lái)。然后我們需要配置router

在Route中設(shè)置具體的path 和組件。

接下來(lái)我們看看如何進(jìn)行路由的切換，這些內(nèi)容存放到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 中我們可以指定具體的路由地址。

剩下的就是添加組件了，比如我們添加一個(gè)簡(jiǎn)單的start.js到components下面。

import React from 'react';

let Start = React.createClass({ 

 render() {
 return(
  <div className="c-home">
  <img alt="guide" src="http://img1.vued.vanthink.cn/vuedd144134a46129d7068d36025d64ba905.png" />
  <h4>React+React-Router+Webpack+Yarn Seed</h4>
  </div>
 );
 }
});
export default Start;

其他的組件代碼就不詳細(xì)展示了。

這個(gè)時(shí)候我們輸入yarn run build,我們可以看到build下會(huì)生成一個(gè)bundle.js 文件。如果輸入 yarn run start就可以看見(jiàn)頁(yè)面了

本地輸入 yarn start 然后訪問(wèn) http://localhost:9000 就可以看到自己寫(xiě)的內(nèi)容了。

關(guān)于React-Router的更多配置，可以參考官方文檔的教程。

四、發(fā)布

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

這次改變用yarn的安裝速度確實(shí)比原來(lái)npm快了很多幾乎都是10s內(nèi)就完成了。不需要長(zhǎng)時(shí)間等待或者切換taobao npm 鏡像。

總結(jié)

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

您可能感興趣的文章: