当前位置：首页 > 资讯 > 技术文档

利用yarn实现一个webpack+react种子

时间：2022-12-10 08:49 编辑：来源：阅读：
扫一扫，手机访问

摘要：利用yarn实现一个webpack+react种子

[b]一、初始化项目[/b] 首先确保你的node 版本 >=4.0.并且确保yarn可以正常工作，关于安装yarn，[url=http://www.1sucai.cn/article/95630.htm]你可以看这里[/url] 我们先创建个空文件夹比如[code]yarn-react-webpack-seed[/code],然后输入命令：

yarn init

yarn 如果没有安装，全程用 npm代替也没问题。项目会初始化 [code]package.json[/code] ,然后填写一些基本信息即可。接下来我们开始安装依赖项，再[code] package.json [/code]的添加下面内容

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

[b]运行命令:[/b]

yarn install

你也可以自行添加依赖，输入[code]yarn add xxx[/code]即可。

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

[b]项目创建好后，我们接下来创建一些必要的文件和目录；[/b]

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

[b]二、webpack[/b] webpack （更多）是一款模块处理器，他会将你所有的代码打包成静态文件，放到你的开发的App中。 [b]打开webpack.config.js，然后添加下面的代码:[/b]

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()
 ]
};

这份文件大概有四个配置项[code]entry[/code], [code]output[/code], [code]module[/code],[code]plugins[/code]. [code]entry[/code]:指定打包的入口文件，每有一个键值对，就是一个入口文件。 [code]output[/code]：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称，filename里面的[name]会由entry中的键替换,例子中的/build/bundle.js便是生成的文件。 [code]module[/code]：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会进行处理。这里我们使用了react-hot 和 babel。babel-loader是我们使用ES-6进行开发时用于生成JS文件。 [code]loader[/code]对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过jsx-loader处理，然后经过babel-loader处理。yarn add添加这些插件。babel中的preset配置你也可以.babelr文件中定义：

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

[code]plugins[/code]: 这里定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取出公用的部分，生成common.js。这个时候我们再[code]package.json[/code]中加入script 字段，

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

这个时候我们输入一个[code]yarn start[/code]命令时候我们会启动一个[code]webpack server[/code]这个时候你可以访问 [code]http://localhost:9000/[/code] 看到我们的页面了; 如果你使用[code]yarn run build[/code]时候可以将文件自动生成到bulid/下。 [b]接下来我们新建index.html文件[/b]

<!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。 [b]三、React-router[/b] 完成项目的基本创建，接下来我们创建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;

头部是我们将要用的[code]react[/code]和[code]react-router[/code]的模块引进来。同时我们把用到的组件Links,Start,Guide等引进来。然后我们需要配置router 在[code]Route[/code]中设置具体的path 和组件。接下来我们看看如何进行路由的切换，这些内容存放到[code]src/components/links.js[/code]中。

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;

[b]在Link 中我们可以指定具体的路由地址。[/b] 剩下的就是添加组件了，比如我们添加一个简单的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;

其他的组件代码就不详细展示了。这个时候我们输入[code]yarn run build[/code],我们可以看到build下会生成一个bundle.js 文件。如果输入[code] yarn run start[/code]就可以看见页面了本地输入 [code]yarn start [/code]然后访问 [code]http://localhost:9000 [/code]就可以看到自己写的内容了。关于React-Router的更多配置，可以参考官方文档的教程。 [b]四、发布[/b] 实际上我们有很多方法可以上线你的服务，但是非常好的一件事情是webpack 可以轻松的使用生成的文件。其中你可以快速的将这些资源文件放到cdn上，然后将index.html放到主机上，更新我们的脚本路径就可以了。这次改变用yarn的安装速度确实比原来npm快了很多几乎都是10s内就完成了。不需要长时间等待或者切换taobao npm 镜像。 [b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

全部评论(0)

上一篇：node.js 发布订阅模式的实例
下一篇：使用CamanJS在Web页面上处理图像的技巧

资讯排行榜
更多>>