利用yarn实现一个webpack+react种子
一、初始化项目
首先确保你的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;
头部是我们将要用的react和react-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 镜像。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关推荐
-
Hadoop2.X/YARN环境搭建--CentOS7.0系统配置
一.我缘何选择CentOS7.0 14年7月7日17:39:42发布了CentOS 7.0.1406正式版,我曾使用过多款Linux,对于Hadoop2.X/YARN的环境配置缘何选择CentOS7.0,其原因有: 1.界面采用RHEL7.0新的GNOME界面风,这可不是CentOS6.5/RHEL6.5所能比的!(当然,Fedora早就采用这种风格的了,但是现在的Fedora缺包已然不成样子了) 2.曾经,我也用了RHEL7.0,它最大的问题就是YUM没法用,而且总会有Warning提示注册购
-
Yarn的安装与使用详细介绍
在官方介绍里有这么一句话: Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don't ever have to worry. 关键意思就是,快速,安全,可靠.你下载的包将不再重新下载.而且确保在
-
利用yarn代替npm管理前端项目模块依赖的方法详解
本文主要给大家介绍了关于yarn代替npm管理前端项目模块依赖的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 什么是 yarn? 简单来说,yarn 是一个与 npm 功能相同的工具,用于前端项目的依赖管理.在使用 npm 的项目中,使用 npm 命令的地方都可以使用 yran 来代替. 为什么要使用 yarn 替代 npm 呢?yarn 相对 npm 来说,主要的特点有: 离线.并行安装:依赖并行安装,缓存已下载过的依赖并优先使用,各种优化使得安装依赖速度显著提升
-
yarn的使用与升级Node.js的方法详解
前言 在官方介绍里有这么一句话: Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don't ever have to worry. 关键意思就是,快速,安全,可靠.你下载的包将不再重新下载.而且
-
JS新包管理工具yarn和npm的对比与使用入门
这篇文章会通过以下几个方面介绍yarn的: yarn对比npm解决了什么问题,带来哪些便利. 获取yarn的正确姿势 yarn的使用入门(介绍一些常用的命令 个人使用心得 yarn对比npm的优点 根据官方文档yarn具有6大优点 1.离线模式 yarn会有一个缓存目录,会缓存以前安装过的软件包,再次安装时就不必从网络下载了,大大加速安装速度. 这一点很重要,npm 饱受诟病的一点就是,每次安装依赖,都需要从网络下载一大堆东西,而且是全部重新下载,工程多的时候比较烦人. 我司部署node项目,是
-
yarn与npm的命令行小结
一.首先需要了解的命令 npm install === yarn -- install 安装是默认行为. npm install taco --save === yarn add taco -- taco 包立即被保存到 package.json 中. npm uninstall taco --save === yarn remove taco 在 npm 中,可以使用 npm config set save true 设置 - -save 为默认行为,但这对多数开发者而言并非显而易见的.在 y
-
Node.js包管理器Yarn的入门介绍与安装
前言 这两天大家有没有都被Yarn悄悄刷了屏,最近Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm .为了跟上 Javascript 这股潮 流的脚步,大概的浅尝了一下这个自称是又快又可信赖又安全的包管理,所以写的内容不会很详细,更多的可能只是针对这个全新的包管理与 npm 的不同之处来对比.也可能有些地方写得不对,如果有的话,欢迎指正. 一.安装 首先当然是安装啦.跟 npm 这种被钦点而随 nodejs 一起被安装的包管理器不同, Yarn 需要自行手动安装
-
Hadoop2.X/YARN环境搭建--CentOS7.0 JDK配置
Hadoop是Java写的,他无法使用Linux预安装的OpenJDK,因此安装hadoop前需要先安装JDK(1.6以上) 原材料:在Oracle官网下载的32位JDK: 说明: 1.CentOS 7.0系统现在只有64位的,但是,Hadoop一般支持32位的,在64位环境下有事会有Warning出现,避免真的有神马问题,选择i586的JDK(即32位的),当然,64位的CentOS 7 肯定是兼容32位JDK的,记住:64位系统肯定兼容32位的软件,32位系统不能兼容64位软件.64位只是说
-
利用yarn实现一个webpack+react种子
一.初始化项目 首先确保你的node 版本 >=4.0.并且确保yarn可以正常工作,关于安装yarn,你可以看这里 我们先创建个空文件夹 比如yarn-react-webpack-seed,然后输入命令: yarn init yarn 如果没有安装,全程用 npm代替也没问题. 项目会初始化 package.json ,然后填写一些基本信息即可. 接下来我们开始安装依赖项,再 package.json 的添加下面内容 "dependencies": { "react&
-
webpack+react+antd脚手架优化的方法
在之前的文章中了解了webpack v4的特性,现在将知识用于实践,对之前写的一个react脚手架进行打包性能的优化. 优化类目 样式分离 第三方资源分离 区分开发环境 热更新 提取公共代码 1. CSS分离 npm install extract-text-webpack-plugin -D webpack.config.js 将css.less.sass文件单独从打包文件中分离 + let cssExtract = new ExtractTextWebpackPlugin({ + filen
-
浅谈webpack+react多页面开发终极架构
webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口,比如不同的h5活动,或者需要支持seo的官方网站,都需要多个不同的html.webpack-react-multi-page架构让你可以在多页面在项目开发中自动化打包新创建页面并保证每个页面都可以热更新 ,build打包后有清晰的文件层次结构. 概览 key value
-
如何编写一个 Webpack Loader的实现
前言 在平时自己由零搭建项目时,虽然基础配置都比较熟悉,比如配置 file-loader, url-loader, css-loader 等,配置不难,但究竟是怎么起作用的呢,今天就来说说如何编写一个 Webpack Loader. Loader 作用 按我自己的简单理解,loader 通常指打包的方案,即按什么方式来处理打包,打包的时候它可以拿到模块源代码,经过特定 loader 的转换后返回新的结果. 比如 sass-loader 可以把 SCSS 代码转换成 CSS 代码 编写 Loade
-
80行代码写一个Webpack插件并发布到npm
1. 前言 最近在学习 Webpack 相关的原理,以前只知道 Webpack 的配置方法,但并不知道其内部流程,经过一轮的学习,感觉获益良多,为了巩固学习的内容,我决定尝试自己动手写一个插件. 这个插件实现的功能比较简单: 默认清除 js 代码中的 console.log 的打印输出: 可通过传入配置,实现移除 console 的其它方法,如 console.warn.console.error 等: 2. Webpack 的构建流程以及 plugin 的原理 2.1 Webpack 构建流程
-
利用Python实现一个简单的Web汇率计算器
目录 Dash是什么 网页搭建步骤 安装相关依赖(库) 导入相关包 构建app 构建结果输出函数 网页结构Layout搭建 callback回调参数设定 界面效果 前段时间刚接触到前端网页开发,但是对于刚入门的小白而言,像flask.Django等这类稍大型的框架确实不太适合,今天这个Dash是集众家之长于一体的轻量化Web开发库. Dash是什么 Dash 是一个用于构建基于 Web 的应用程序的 Python 库,无需 JavaScript . Dash 同时也是用于创建分析 Web 应用程
-
利用python生成一个导出数据库的bat脚本文件的方法
实例如下: # 环境: python3.x def getExportDbSql(db, index): # 获取导出一个数据库实例的sql语句 sql = 'mysqldump -u%s -p%s -h%s -P%d --default-character-set=utf8 --databases mu_ins_s%s > %s.s%d.mu_ins_%d.sql' %(db['user'], db['pwd'], db['host'], db['port'], index, db['serv
-
利用正则表达式判断一个给定的字符是否是回文
如果给定的字符串是回文,返回true,反之,返回false. 如果一个字符串忽略标点符号.大小写和空格,正着读和反着读一模一样,那么这个字符串就是palindrome(回文). 注意你需要去掉字符串多余的标点符号和空格,然后把字符串转化成小写来验证此字符串是否为回文. 函数参数的值可以为"racecar","RaceCar"和"race CAR". 关键代码: 去掉字符串中的标点符号和空白格.可以用str.replace()+正则表达式匹配. v
-
iOS中利用CoreAnimation实现一个时间的进度条效果
在iOS中实现进度条通常都是通过不停的设置progress来完成的,这样的进度条适用于网络加载(上传下载文件.图片等).但是对于录制视频这样的需求的话,如果是按照每秒来设置进度的话,显得有点麻烦,于是我就想直接用CoreAnimation来按时间做动画,只要设置最大时间,其他的就不用管了,然后在视频暂停与继续录制时,对动画进行暂停和恢复即可.录制视频的效果如下: 你可以在这里下载demo 那么接下来就是如何用CoreAnimation实现一个进度条控件了. 首先呢,让我们创建一个继承自CASha
-
利用java制作一个小的目录查询器的方法
实例如下: import java.util.*; import javax.swing.*; import java.awt.*; import java.io.*; import java.awt.event.*; class MyWindow{ private Frame f1; private Button bt1; private TextField tx1; private TextArea tx2; MyWindow(){ init(); } public void init(){