搭建完美的React开发生产测试环境（三）

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

前言

上一篇继续第一篇，说了如何从零快速搭建一个启动在本地的并且能够进行热重载的 web服务器，并且将配置文件也改为 ES6的语法书写，如果还不是很了解，可以看看上一篇戳这里

本篇继续上文，说说如何抽离项目中的基础配置，在项目中配置eslint，如何在打包结束后自动打开浏览器。

说的不准确，或者有错误，多多指教，多多指教，多多指教。

抽离项目中的基础配置

为什么要把很多基础配置从服务器文件中抽离出来，原因很简单，方便维护，方便修改其中内容。

创建config文件夹

在项目根目录下创建config文件夹

$ cd qz-react-init
$ mkdir config

创建开发、生产配置文件

在config目录下创建dev.env.js和prod.env.js两个文件，用来区分开发、生产环境。

dev.env.js文件如下：

export default {
  NODE_ENV: '"development"'
}

prod.env.js文件如下：

export default {
  NODE_ENV: '"production"'
}

区别不大，只是在node运行环境做了一些修改。

创建入口配置文件

在config目录下创建index.js，取名为index.js的好处是在外部引用的是只需要import config from '../config'，从而省略index.js，接着我们把常用的选项都抽离出来。

import prodEnv from './prod.env'
import devEnv from './dev.env'
 
export default {
  build: {
    // 运行环境
    env: prodEnv
  },dev: {
    // 运行环境
    env: devEnv,// 开发运行端口
    port: 3030,// 是否自动打开浏览器窗口
    autoOpenBrowser: true,// 编译输出的二级目录
    assetsSubDirectory: 'static',// 编译发布的根目录
    assetsPublicPath: '/'
  }
}

现在我们已经把常用的配置都抽离到了配置文件中，然后修改一下build/dev-server.js。

import config from '../config' // 首先引入配置文件
 
// 默认开发环境
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
 
// 监听端口
const port = process.env.PORT || config.dev.port
// 是否自动打开网页
const autoOpenBrowser = !!config.dev.autoOpenBrowser
 
// 设置服务器静态文件目录
const staticPath = path.posix.join(config.dev.assetsPublicPath,config.dev.assetsSubDirectory)
app.use(staticPath,express.static('./static'))

这样我们就把配置选项都单独的抽离出来了，后期要想修改port之类的只需要在配置文件中修改就可以了。

编译完成自动打开浏览器

写程序的目的就是为了偷懒，所以我们绝对不会放过任何偷懒的机会，像打开浏览器然后输入网站这种没有技术含量的事情当然是能省就省，所以让我们省略这一步吧。

安装插件

能够自动打开浏览器的插件还是比较多的，像browser-sync、opn等等，比如browser-sync已经很成熟了，能够自动更新页面之类的，带的东西也挺多，但是吧，我们并不想用这么多别人已经弄好的东东，单纯就想要个打开浏览器的功能，所以选择opn，我们还是先安装opn。

$ npm install opn --save-dev

修改服务入口文件dev-server.js

这个时候我已经有可以自动打开浏览器的插件了，我们就可以开始使用了撒。

// 引入opn
import opn from 'opn'
// 定义要打开的网址
const uri = 'http://localhost:' + port
// 打包完毕之后打开浏览器
console.log('> Statring dev server...')
// 见后
devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '\n')
  // 判断是否自动打开浏览器
  if (autoOpenBrowser) {
    opn(uri)
  }
})

这边我们用到了一个webpakc-dev-middleware的回调函数waitUntilValid，作用就是在编译之后执行。这时一个自动打开浏览器的web服务就好了，在执行npm run dev就会发现会自动打开浏览器http://localhost:3030。

加入eslint

我们在日常码代码的时候可能会经常听到这个东东eslint，总结来说它就是一个帮助我们配置我们编码规则的插件，让我们避免以下不必要的错误。

安装依赖

既然要使用当然还是需要一些依赖的，我们先用几个比较基础的。

$ npm install eslint eslint-loader babel-eslint --save-dev

eslint (主要依赖包)
eslint-loader (webpack中使用eslint)
babel-eslint (支持一些实验属性)

创建eslint配置文件

eslint配置的方法很多，我比较喜欢在根目录下创建.eslintrc的方式来配置它。

{
  "root": true,"parser": "babel-eslint","parserOptions": {
    "ecmaVersion": 6,"sourceType": "module","ecmaFeatures": {
      "jsx": true
    }
  },"globals": {
    "document": true
  },"rules": {
    "indent": ["error",2]
  }
}

看看上面的配置，在规则那里我只写了一条，我们一条一条的来解析它。

root: true 默认情况下eslint会在所有的父级目录下寻找配置文件，加了这个发现这个文件后就会停止查找别的配置文件
parser: 'babel-eslint' 修改解析器为babel-eslint
parserOptions 解析器的一些选项。
globals 未定义的变量会报错，但是有一些全局变量我们并不会定义，比如window、document等等，这边加入以后就能使用而不会报错
rules 这里就是配置你书写代码的规则，里面我就配置了一条缩进必须为两个字符，不然就会报错，还有很多其他规则，可以自行先摸索，后面我会挨着补充一些

修改webpack配置文件

除了上述全局配置eslint以外，因为我们是使用webpack对项目进行打包，所以同babel一样，我们需要对eslint在webpack中进行配置，修改webpack.base.conf.js，在rules配置中加入eslint-loader相关配置。

{
    // 匹配所有的 .js .jsx 文件
    test: /(\.js|\.jsx)$/,// 只包含这些文件 src 和 test 目录
    include: packFiles,// eslint-loader加载器优先执行
    enforce: 'pre',// 使用的加载器
    loader: 'eslint-loader'
  }

创建eslint忽略文件

有时候有些文件并不想被eslint检查，这时候我们就需要eslint的忽略文件.eslintignore，我们只检查src目录下的项目文件。

build/*.js
node_modules/*.js
webpack.*.js

最后的项目结构为：

├── build
│   ├── dev-server.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── prod.env.js
├── node_modules
├── src
│   ├── main.js
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── index.html
├── LICENSE
├── package.json
└── README.md

本节就到这里，其实还有一些东西可以完善。

本篇结尾

其实我们还有东西可以在修改，比如eslint的规则，虽然我们的服务器是可以热重载，但是还是需要我们每次刷新页面，我也不想刷新页面，所以还是要在改一改，别急，一步一个脚印慢慢来，请听下回分解。