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

发布时间：2020-12-15 06:37:19 所属栏目：百科来源：网络整理

导读：如果看了此文你还不是很清楚很多细节的问题，可以戳我的 Demo 希望对你有所帮助前言这两天公司终于又招了一个小伙伴，把我从项目组解放出来，这半年跟个流水线工人一样一直写着重复的网页...正式进入产品线开发产品，对于框架的选型什么的，小公司没什么考

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

前言

这两天公司终于又招了一个小伙伴，把我从项目组解放出来，这半年跟个流水线工人一样一直写着重复的网页...正式进入产品线开发产品，对于框架的选型什么的，小公司没什么考虑，随个人喜好，这还是我比较喜好这里的原因吧，毕竟好像什么都能学学。不管是 Vue、 Angluar还是 React都有一点点了解吧，最后还是选择了 React，因为钟爱阿里的 antd，嘻嘻！

做React项目，官网好像说的很简单使用create-react-app就好了撒，所以写这篇文章干嘛？我不可能说React要怎么写吧，我倒是想说说，关键是我还不熟.......所以我今天要做的是抛开create-react-app快速构建工具，如何从零开始搭建React开发生产测试环境，毕竟不管是webpack、babel还是eslint都是蛮复杂了，搞了好几天，看了很多文，才算是摸到点皮毛。

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

文件目录搭建

从零开始初始化文件目录。

npm init

首先，不用说，创建一个空的文件夹，进入文件夹下，进行npm的初始化。

$ mkdir qz-react-init
$ cd qz-react-init
$ npm init

执行npm init后创建了目录下第一个文件package.json，同时需要填写部分信息，如果你不是很了解，一直下一步就行，后面可以修改，随意看其中三个最简单的配置，看名字应该也知道是什么意思，其他配置项也比较傻瓜，有兴趣的可以自行多了解一下，就不多加阐述了。

{
  "name": "qz-react-init","version": "1.0.0","description": "it's my react init"
}

创建几个关联文件

我们继续创建文件README.md、LICENSE、.gitignore和.editorconfig，这些文件并不影响项目运行，大概说一下它们的作用。

README.md (项目描述文件)
LICENSE (开源协议文件)
.gitignore (git提交忽略文件)
.editorconfig (编辑器规则文件，保持各个编辑器风格一致)

.editorconfig文件配置还算简单，看英语大概就知道是什么意思了，就不多解释了。

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

创建 React 入口文件

React无论使用.js还是.jsx写的都没法直接运行在浏览器上，所以需要一个入口文件，创建文件index.html。

index.html文件与普通的html文件没有什么差别。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>qz-react-init</title>
</head>
<body>
  <div id="root"></div>
  <script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>

好了，到这里基础文件初始化已经OK了，下一步开始搭建React运行环境，进行完以上步骤以后，项目目录结构如下：

├── .editorconfig
├── .gitignore
├── index.html
├── LICENSE
├── package.json
└── README.md

React 运行环境

我们开始初始化 React 运行环境。

安装本篇开发依赖

我们首先在项目目录qz-react-init下安装本篇用上的相关依赖。

$ npm install react react-dom --save
$ npm install babel-core babel-loader babel-preset-es2015 babel-preset-react webpack --save-dev

- react (react基础库)
- react-dom (html页面渲染react组件，依赖于react.js)
- babel-core (babel 核心库， babel是虾米？转码器，JavaScript ES6语法转为ES5)
- babel-loader (相当于中间件，webpack打包整合之前先按babel规则转换)
- babel-preset-es2015 (写代码基本用ES6，相当于给babel一个ES6的预设环境)
- babel-preset-react (react转码规则)
- webpack (看后面)

webpack 配置

开发React必然不能少了webpack，webpack具体是什么，大概就是把所有项目资源整合杂糅在一起。

好了，我们现在已经把本篇所有相关依赖安装好了，然后创建webpack配置文件webpack.config.js，最后把`配置完成，就可以基本开发了，一起来看看天书一般的webpack`配置。

var path = require('path')

module.exports = {
  // 入口
  entry: {
    app: './src/main.js'
  },// 出口
  output: {
    // 出口文件目录
    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']
          }
        }
      }
    ]
  }
}

babel 配置

webpack.config.js配置完毕后，我们还需在根目录下创建.babelrc，它用来告诉babel应该以什么方式运行代码，我们在文件中加入两个预设值。

{
  "presets": ["es2015","react"]
}

测试基础环境

基础环境搭建完毕，我们当然还要测试一下这个环境到底能不能用，写一个React组件试试，创建src目录并在目录下创建main.js。

import React from 'react'
import ReactDom from 'react-dom'

const home = 'Hello World!'

ReactDom.render(home,document.getElementById('root'))

走到这一步，就可以试试React是不是能用了，此时在根目录下载运行webpack，可以看到目录中多了一个dist目录，目录下面多了一个bundle.js，打开index.html，可以看到Hello world!已经成功运行，本篇基础环境构建完毕。

最后的项目结构：

├── dist
│   ├── bundle.js
├── node_modules
├── src
│   ├── main.js
├── .editorconfig
├── .gitignore
├── index.html
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── webpack.config.js

本篇结尾

做完这一步好像是能开始开发了，但是和用create-react-app创建的react项目还差了很多，没有热加载，没有代码检查等等等...好像就能运行一下，别急，一步一个脚印慢慢来，请听下回分解。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!