搭建完美的React开发生产测试环境(二)

2017-12-30 11:35:29来源:segmentfault作者:青湛人点击

分享
如果看了此文你还不是很清楚很多细节的问题,可以戳我的 Demo 希望对你有所帮助

前言
上一篇阐述了从零到能进行React开发的基本流程,如果你已经很熟了,请继续往下看,如果你对基础结构还不是很了解的话,可以先看看第一篇 戳这里

本篇继续上文,说说如何搭建一个自动打包,无需每次修改代码重新打包,热重载的环境。


说的不准确,或者有错误,多多指教,多多指教,多多指教!!!!


express 服务器

express 是什么?基于Node.js平台,快速、开放、极简的 web 开发框架。我们需要一个能够自动更新代码的环境,不可能一直访问静态的index.html页面,所以需要我们的程序能够运行在服务器上,所以这时就用上了express,它能帮助我们快速搭建一个轻量的web服务器。


安装依赖

这一步我们应该还是很熟了,根目录下运行下面的命令。


$ npm install express --save-dev
创建服务启动文件

为了以后长远打算,我们不直接在根目录下创建服务入口文件,把构建文件都单独存放在build目录下,创建build目录并在目录下创建dev-server.js,我们一起来看看用express开启一个node.js环境是多么简单。


var express = require('express')// 实例化express
var app = express()
// 监听端口
var port = 3030// 所有请求
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname,'../index.html'))
})// 监听3030端口,开启服务
app.listen(port, function (err) {
if (err) {
console.error(err)
} else {
console.info('Listening on port %s', port)
}
})

此时我们在根目录下运行node build/dev-server.js就能启动node.js服务,同时我们在浏览器中访问http://localhost:3030/就能访问index.html,但是其实这个时候我们并不能看到上一篇结束时那样的Hello World!,这是因为我们并不能像之前那样访问到dist/bundle.js,怎么做呢,看后面。


修改 webpack 配置文件

在output选项中加入publicPath指定服务端静态资源路径。


// 出口
output: {
// 出口文件目录
path: path.resolve(__dirname, 'dist'),
// 出口文件名
filename: 'bundle.js',
// 服务端资源路径
publicPath: 'http://localhost:3030/dist/'
},

改到这一步,访问http://localhost:3030/的时候就可以看到正常的Hello World!页面了,但是吧,好像还是要缺点什么,不能热重载....引入下一个问题。


热重载的服务器

要想页面能够热重载,实时的进行组件更新,还需要用的两个webpack插件,webpack-dev-middleware和webpack-hot-middleware。


安装依赖

我们依然还是首先安装这两个插件:


$ npm install webpack-dev-middleware webpack-hot-middleware --save-devwebpack-dev-middleware (它是组织webpack使其成为express的中间件)
webpack-hot-middleware (与webpack-dev-middleware合用定制一个热重载的webpack开发服务器)修改 dev-server.js 文件

在express中引入中间件还是比较简单的,本篇最终版dev-server.js如下:


var path = require('path')
var express = require('express')
var webpack = require('webpack')
var webpackConfig = require('../webpack.config.js')// 实例化express
var app = express()
// 监听端口
var port = 3030// 加载webpack配置
var compiler = webpack(webpackConfig)// 加载中间件webpack-dev-middleware
// 1. 监听资源变更,自动打包 2. 快速编译,资源走内存,不读硬盘 3.返回中间件
app.use(require('webpack-dev-middleware')(compiler, {
// 不打印多余信息
noInfo: true,
// 监听目录
publicPath: webpackConfig.output.publicPath,
// 控制台打包彩色
stats: {
colors: true
}
}))// 加载中间件webpack-hot-middleware
// 热加载,实时更新改变
app.use(require('webpack-hot-middleware')(compiler))// 所有请求
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname,'../index.html'))
})// 监听3030端口,开启服务
app.listen(port, function (err) {
if (err) {
console.error(err)
} else {
console.info('Listening on port %s', port)
}
})
修改 webpack.config.js 文件

光在dev-server.js中引入两个中间件还不能达到想要的效果,还须在webpack.config.js中指明插件,在module之后加入plugins选项。


// 插件
plugins: [
// 启用热更新
new webpack.HotModuleReplacementPlugin(),
// 允许错误不打断程序
new webpack.NoEmitOnErrorsPlugin()
]

走到这里,已经可以实现热重载的功能了。


重整 webpack 配置文件

为了以后更好的管理,我把webpack.config.js文件放到build目录下,改用ES6书写,同时分离webpack.config.js文件为两个文件webpack.base.conf.js和webpack.dev.conf.js。


安装依赖

要做到上述说的这些,还需两个个插件。


$ npm install babel-cli webpack-merge --save-devbabel-cli (使用babel命令)
webpack-merge (合并webpack配置文件)创建 webpack.base.conf.js

预设以后的生产环境的webpack配置文件,抽离开发、生产环境的公共配置。


import path from 'path'export default {
// 入口
entry: {
app: './src/main.js'
},
// 出口
output: {
// 服务器静态资源目录
publicPath: 'http://loaclhost:3030/dist',
// 出口文件目录
path: path.resolve(__dirname, 'dist'),
// 出口文件名
filename: 'bundle.js'
},
// 模块
module: {
rules: [
{
// 匹配所有的 .js .jsx 文件
test: /(/.js|/.jsx)$/,
// 忽略 node_modules 目录
exclude: /node_modules/,
use: {
// 使用的loader
loader: 'babel-loader',
// babel-loader 的选项
options: {
// 预设规则
presets: ['es2015', 'react']
}
}
}
]
}
}
创建 webpack.dev.conf.js

我们将之前开发环境用到的插件抽离到这个文件下。


import webpack from 'webpack'
import merge from 'webpack-merge'
import baseWebpackConfig from './webpack.base.conf'export default merge(baseWebpackConfig, {
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
})
统一风格

既然我们都已经改用ES6书写webpack配置文件了,在服务器文件dev-server.js还是使用的ES5,我们现在将这个文件也改为ES6的写法。


import path from 'path'
import express from 'express'
import webpack from 'webpack'
import webpackConfig from './webpack.dev.conf.js'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'// 实例化express
const app = express()
// 监听端口
const port = 3030// 加载webpack配置
const compiler = webpack(webpackConfig)// 加载中间件webpack-dev-middleware
// 1. 监听资源变更,自动打包 2. 快速编译,资源走内存,不读硬盘 3.返回中间件
app.use(webpackDevMiddleware(compiler, {
// 不打印多余信息
noInfo: true,
// 监听目录
publicPath: webpackConfig.output.publicPath,
// 控制台打包彩色
stats: {
colors: true
}
}))// 加载中间件webpack-hot-middleware
// 热加载,实时更新改变
app.use(webpackHotMiddleware(compiler))// 所有请求
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname,'../index.html'))
})// 监听3030端口,开启服务
app.listen(port, function (err) {
if (err) {
console.error(err)
} else {
console.info(`Listening on port ${port} !`)
}
})

好了,到这里不管是热重载的服务器搭建,webpack配置文件分离,改用ES6的语法书写都已经完工了,但是如果我们依然在命令行使用node build/dev-server.js并不能运行起来,因为node.js环境并没有完全的支持ES6的语法,所以我们用到了另一个命令babel-node build/dev-server.js以babel先转换在启动node.js服务器。


本篇结尾

到这里算是给我们的基本环境加了不少有用的配置了,但是还是不够,我们还想更懒一点,不想点开浏览器,不想输入一长串的url,不想写一大堆的../../../等等等,所以,远远没有结束,我们继续一步一步的来,请听下回分解。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台