ribbon image search rewind fast-forward speech-bubble pie-graph star

使用yarn 制作一个webpack + react 种子

前言

很早以前写过使用React-router和Webpack快速构建一个react程序。很多网友发现版本太老,于是乎最近又重新组织了下结构,使用最近发布的yarn作为包管理工具,介绍下基本安装步骤。并且这次代码包提到了github上,这样大家也可以有个直接参考。

Github 项目地址

初始化项目

首先确保你的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-hotbabelbabel-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';  
// 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;  

头部是我们将要用的reactreact-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="http://img1.vued.vanthink.cn/vuedd144134a46129d7068d36025d64ba905.png" />
        <h4>React+React-Router+Webpack+Yarn Seed</h4>
      </div>
    );
  }
});
export default Start;  

其他的组件代码就不详细展示了。

这个时候我们输入yarn run build,我们可以看到build下会生成一个bundle.js 文件。 如果输入 yarn run start就可以看见页面了

Demo

本地输入 yarn start 然后访问 http://localhost:9000 就可以看到自己写的内容了。

关于React-Router的更多配置,可以参考官方文档的教程。

发布

实际上我们有很多方法可以上线你的服务,但是非常好的一件事情是webpack 可以轻松的使用生成的文件。其中你可以快速的将这些资源文件放到cdn上,然后将index.html放到主机上,更新我们的脚本路径就可以了。

这次改变用yarn的安装速度确实比原来npm快了很多几乎都是10s内就完成了。不需要长时间等待或者切换taobao npm 镜像。

使用中的任何问题或者建议,可以直接反馈到项目的issue

更多阅读

You Can Speak "Hi" to Me in Those Ways