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


Posted in Javascript onOctober 25, 2016

一、初始化项目

首先确保你的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'; 
// 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就可以看见页面了

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

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

四、发布

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

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
js实现九宫格抽奖
Mar 19 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
Yarn的安装与使用详细介绍
Oct 25 #Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 #Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 #Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 #Javascript
微信小程序 video组件详解
Oct 25 #Javascript
微信小程序 form组件详解
Oct 25 #Javascript
微信小程序 icon组件详细及实例代码
Oct 25 #Javascript
You might like
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
php实现的RSS生成类实例
2015/04/23 PHP
laravel自定义分页效果
2017/07/23 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
Javascript模板技术
2007/04/27 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
python 字段拆分详解
2019/12/17 Python
应届生妇产科护士求职信
2013/10/27 职场文书
计算机网络专业推荐信
2013/11/24 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
丽江古城导游词
2015/02/03 职场文书
英文辞职信范文
2015/05/13 职场文书
年终工作总结范文
2019/06/20 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
详细分析PHP7与PHP5区别
2021/06/26 PHP
python识别围棋定位棋盘位置
2021/07/26 Python
Python turtle编写简单的球类小游戏
2022/03/31 Python