HTML5（52）
前段时间使用React+Redux做了个后台管理的项目，在React初体验中分享了下入门经验。这篇文章谈谈我的部署实践。
怎样才是好的部署呢？我觉至少有以下2点：
优化性能：包括代码执行速度、页面载入时间自动化：重复的事情尽量让机器完成，最好能运行一条命令就完成部署
首先从代码层面来分析。
使用React+Redux，往往会用到其强大的调试工具&&。在&&时需要围绕Store、Component进行一些配置。然而这些都是用来方便调试的，生产环境下我们不希望加入这些东西，所以建议就是从代码上隔离development和production环境：
containers/
Root.dev.js
Root.prod.js
store.dev.js
store.prod.js
同时采用单独的入口文件（比如上面的&containers/Root.js&）按需加载不同环境的代码：
if (process.env.NODE_ENV === 'production') {
module.exports = require('./Root.prod');
module.exports = require('./Root.dev');
有一个细节需要注意：ES6语法不支持在if中编写import，所以这里采用了CommonJS的模块引入方法&require&。
具体可以看看Redux的&&示例项目。
代码层面还需要注意的一点就是按需import，否则可能会在打包时生成不必要的代码。
OK，我们现在用webpack打个包，&webpack --config webpack.config.prod.js --progress&，结果可能会让你下一跳：8.4M！我的心中有一万头草泥马在奔腾！
使用webpack打包
别急，接下来我们来调教下打包工具。目前React主流打包工具有2种：&、&&。Browserify没用过，这里主要谈谈webpack的配置经验。
同上，建议为不同的环境准备不同的webpack配置文件，比如：&webpack.config.dev.js&、&webpack.config.prod.js&。下面我们来看看几个比较关键的配置选项：
文档在&&，我对source
map技术不太了解，所以几个选项真不知道是干什么的。不过好在下面的表格中有写哪些是production supported，随便选择一个就好，感觉结果区别不大。这里我选择了&source-map&，webpack一下后生成了2个包：
bundle.js：3.32 MBbundle.js.map：3.78 MB
唔，这样好多了，把用于定位源码的source map分离出去了，一下子减少了一半以上的体积。（注：source map只会在浏览器devtools激活时加载，并不会影响正常的页面加载速度，具体可参考&&、&&。）
你可能会问“怎么不祭出UglifyJS啊？”，现在就祭...webpack文档中有一节&&，讲到了一些优化技巧。Chunks略高级没用过，看前面两个吧。提到了3个插件：UglifyJsPlugin、OccurenceOrderPlugin、DedupePlugin，第一个插件应该都懂是干啥，后面两个描述得挺高深的，不过不懂没关系，全用上试试，反正没副作用：
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin()
打包结果：1.04 MB。
不要忽视NODE_ENV
NODE_ENV其实就是一个环境变量，在Node中可以通过&process.env.NODE_ENV&获取。目前大家往往用这个环境变量来标识当前到底是development还是production环境。
React提供了2个版本的代码（见：&&）：
We provide two versions of React: an uncompressed version for development and a minified version for production. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and
strips all error messages.
同时在React文档中明确建议在生产环境下设置&NODE_ENV&为&production（见：&&）：
Note: by default, React will be in development mode. To use React in production mode, set the environment variable NODE_ENV to production (using envify or webpack's DefinePlugin). A minifier that performs dead-code elimination such as UglifyJS is recommended
to completely remove the extra code present in development mode.
可以通过webpack的DefinePlugin设置环境变量，如下：
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
打包结果：844 KB。
OK，webpack到此为止，给出完整的&webpack.config.prod.js&：
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
'./index.js'
path: path.join(__dirname, 'webpack-output'),
filename: 'bundle.js',
publicPath: '/webpack-output/'
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
loaders: [
test: /.js$/,
loader: 'babel',
exclude: /node_modules/,
include: __dirname
test: /\.css$/,
loaders: [&style&, &css&]
test: /\.scss$/,
loaders: [&style&, &css&, &sass&]
打包结果存放在&webpack-output&文件夹下。
使用FIS3添加hash
前端公认的Best Practice就是给资源打上hash标签，这对缓存前端资源很有用。webpack文档中有一节&&就是专门讲整的，然而配置起来好麻烦的样子，最后我还是选择了百度的&&做hash。
使用方法见文档，写的很详细。贴一下我的&fis-conf.js&：
fis.set('project.files', ['index.html', 'static/**', 'webpack-output/**']);
fis.match('*.css', {
optimizer: fis.plugin('clean-css')
fis.match('*.png', {
optimizer: fis.plugin('png-compressor')
fis.match('*.{js,css,png}', {
useHash: true,
domain: '1.z0.',
其中，通过&useHash: true&启用了hash功能，同时压缩了CSS、PNG图片，然后通过&domain&添加了CDN前缀。
运行&fis3 release -d ./output&后，就把所有的文件打包到&output&文件夹下了，截个图：
844 KB虽然比最开始的8.4 M缩小到了1/10，但其实也很吓人。包大小基本上已经压缩到极限了，但我们还可以通过CDN来加快页面加载时间。
我选择的是&&，效果不错，而且免费额度够用。
上一步中我们已经用FIS3添加了七牛CDN的前缀，接下来就是上传打包文件了。手动上传太麻烦，七牛提供了一个用来批上传的命令行工具&&，具体用法见文档。
使用Fabric进行远程部署
部署的时候难免会涉及到登陆server执行部署命令，你可以手动操作，但我推荐还是用一些工具来做。这方面工具不少，选择顺手的就行，我因为之前有过Python开发经验，所以一直用&&，很好用。安装下python，然后安装包管理工具&&，然后&sudo
pip install fabric&就行了。
在项目文件下创建&fabfile.py&，通过写Python代码描述远程部署过程：
from fabric.api import run, env, cd
def deploy():
env.host_string = &username@ip&
with cd('/path/to/your/project'):
run('git pull')
run('npm install')
run('webpack --progress --config webpack.config.prod.js')
run('fis3 release -d ./output')
run('qrsync qrsync.conf.json')
其中，&env.host_string&描述server信息，然后cd到项目文件夹，&git
pull从GitHub拉取源码，&npm install&安装第三方库，接下来就是各种打包，最后批量上传到CDN。
执行&fab deploy&就部署到生产服务器了。
收尾工作交给Nginx：
域名与本地文件夹路径关联起来gzip支持：这个一定要做，效果很赞，具体启用方法就是将&/etc/nginx/nginx.conf&与gzip相关的东西uncomment一下就行不存在的path一律导向&/index.html&：否则在非根路径下刷新浏览器，就会出现404，开发React的童鞋应该都懂这个坑...
我的&nginx.conf&如下所示：
listen 80;
root /path/to/your/
location / {
try_files $uri /index.
注：有童鞋可能奇怪为什么没有添加cache的配置，因为所有东西都上传到CDN了...
浏览器实际加载效果
在Chrome调试工具下看。
禁止缓存：
可以看到bundle的最终大小为206KB，加载时间是118ms。
启用缓存：
效果还不错。
开发-&部署流程
从开发到部署的流程如下：
编写代码：01010提交到代码仓库：&git add -A && git commit -m 'Some notes.' && git push部署到server：&fab deploy
是不是很简单？
还有一些东西可以加进来：
CI工具：&&、&错误收集：&&、&
具体就不展开了。
就写到这里，欢迎建议。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1414864次
积分：17858
积分：17858
排名：第456名
原创：80篇
转载：1878篇
评论：109条
(1)(1)(24)(16)(43)(27)(7)(54)(12)(48)(18)(13)(6)(4)(64)(2)(1)(3)(28)(56)(51)(59)(16)(44)(12)(4)(84)(70)(60)(84)(63)(14)(10)(68)(73)(84)(10)(9)(44)(91)(41)(116)(153)(180)(101)(3)【React.js模仿大众点评webapp】实战教程（6）使用fetch
【React.js模仿大众点评webapp】实战教程（6）使用fetch
fetch 获取/提交数据，以及开发环境下的数据 Mock
源码地址：
在 jQuery 开发时代，jQuery 已经为我们封装了非常优雅的 ajax 函数，并且针对各个浏览器都做了很好的兼容，非常棒。但是如果你用 React vue 或者 angular 去开发 webapp 时候，你还会再为了一个 ajax 去集成 jQuery 吗？这是一个问题。
另外一个问题，JavaScript 中的 ajax 很早之前就有一个诟病————复杂业务下的 callback 嵌套的问题。如果你对此了解不深刻，建议你去查一下“JavaScript promise”相关的资料。promise 正是 js 中解决这一问题的钥匙，并且作为标准在 ES6 中发布，接下来要介绍的 fetch 就用到了最新的 promise
就是一种可代替 ajax 获取/提交数据的技术，有些高级浏览器已经可以window.fetch使用了。相比于使用 jQuery.ajax 它轻量（只做这一件事），而且它原生支持 promise ，更加符合现在编程习惯。
根据文档提示，用 npm 安装的话，执行npm install whatwg-fetch --save即可安装。为了兼容老版本浏览器，还需要安装npm install es6-promise --save。安装完成之后，注意看一下package.json中的变化。
get 的基本使用
参见./app/fetch/test.js源码，首先要引入依赖的插件
import 'whatwg-fetch'
import 'es6-promise'
然后这样就可以发起一个 get 请求。这里的fetch是引用了插件之后即可用的方法，使用非常简单。方法的第一个参数是 url 第二个参数是配置信息。
var result = fetch('/api/1', {
credentials: 'include',
headers: {
'Accept': 'application/json, text/plain, */*'
以上代码的配置中，credentials: 'include'表示跨域请求是可以带cookie（fetch 跨域请求时默认不会带 cookie，需要时得手动指定 credentials: 'include'。这和 XHR 的 withCredentials 一样），headers可以设置 http 请求的头部信息。
fetch 方法请求数据，返回的是一个 Promise 对象，接下来我们就可以这样用了——完全使用Promise的语法结构。
result.then(res =& {
return res.text()
}).then(text =& {
console.log(text)
或者这样用
result.then(res =& {
return res.json()
}).then(json =& {
console.log(json)
注意，以上两个用法中，只有res.text()和res.json()这里不一样————这两个方法就是将返回的 Response 数据转换成字符串或者JSON格式，这也是 js 中常用的两种格式。
post 的基本使用
参见./app/fetch/test.js源码，首先要引入依赖的插件
import 'whatwg-fetch'
import 'es6-promise'
然后用 fetch 发起一个 post 请求（有method: 'POST'），第一个参数是 url，第二个参数是配置信息。注意下面配置信息中的headers和body的格式。
var result = fetch('/api/post', {
method: 'POST',
credentials: 'include',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/x-www-form-urlencoded'
// 注意 post 时候参数的形式
body: "a=100&b=200"
fetch 提交数据之后，返回的结果也是一个 Promise 对象，跟 get 方法一样，因此处理方式也一样，上面刚描述了，因此不再赘述。
抽象get和post
如果每次获取数据，都向上面一样写好多代码，就太冗余了，我们这里将 get 和 post 两个方法单独抽象出来。参见./app/fetch/get.js和./app/fetch/post.js的源码。
需要注意的是，post.js中，将参数做了处理。因为上面的代码中提到，body: "a=100&b=200"这种参数格式是有要求的，而我们平时在 js 中使用最多的是 JSON 格式的数据，因此需要转换一下，让它更加易用。
这两个方法抽象之后，接下来我们再用，就变得相当简单了。参见 ./app/fetch/data.js
// '/api/1' 获取字符串
var result = get('/api/1')
result.then(res =& {
return res.text()
}).then(text =& {
console.log(text)
在目前互联网行业 web 产品开发中，前后端大部分都是分离开发的，前端开发过程中无法实时得到后端的数据。这种情况下，一般会使用三种方式：
模拟静态数据：即按照既定的数据格式，自己提供一些静态的JSON数据，用相关工具（如）做接口来获取这些数据。该形式使用不比较简单的、只用 get 方法的场景，该项目不适用。
模拟动态接口：即自己用一个 web 框架，按照既定的接口和数据结构的要求，自己模拟后端接口的功能，让前端项目能顺利跑起来。该方式适用于新开发的项目，后端和前端同时开发，适用于该教程的项目。
转发线上接口：项目开发中，所有的接口直接用代理获取线上的数据，post 的数据也都直接提交到线上。该方式适用于成熟项目中，而该项目是新开发的，没有线上接口，不适用。
最后强调一下，该教程是一个前端教程，面向的是前端工程师，后端的开发和处理交给后端工程师来做。后端的业务处理和开发过程，不在本教程的讲解范围之内。
这里我们使用目前比较流行的
来做后端接口的模拟。因此要先安装 koa 极其相关的插件。执行npm install koa koa-body koa-router --save-dev，注意这里使用--save-dev，意思是我们只在开发过程中使用 koa ，项目发布之后 koa 就没用了。因为发布之后的项目，使用的就是后端工程师开发的线上的接口，而不是我们基于 koa 写的接口。
注意，该教程重点关注前端和 React，对于 koa 我们只介绍用到的常用功能。想学习可以去官网或者找相关教程。
我们将模拟接口的代码都写在./mock目录下，接口文件是./mock/server.js（目前只有这一个文件，真正开发项目时，应该会分不同模块）。
然后在./package.json中增加如下代码，然后执行npm run mock即可启动模拟的接口服务。
"scripts": {
"mock": "node --harmony ./mock/server.js",
启动之后，随便找一个 get 的接口，访问以下，例如http://localhost:3000/api/1
使用 webpack-dev-server 的代理
到这里你可能会有一个疑问————koa 接口的端口是3000，而我们项目的接口是8080，这样不就跨域了吗？————如果默认情况下，肯定是跨域了。此时就需要 webpack-dev-server 做一个代理的转发。配置代码在./webpack.config.js中
devServer: {
// 凡是 `/api` 开头的 http 请求，都会被代理到 localhost:3000 上，由 koa 提供 mock 数据。
// koa 代码在 ./mock 目录中，启动命令为 npm run mock
target: 'http://localhost:3000',
secure: false
// ...省略若干代码...
相关标签：
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
Web前端工程师
雄心的一半是耐心！
作者的热门手记
Copyright (C)
All Rights Reserved | 京ICP备 号-2