如果看了此文你还不是很清楚很多细节的问题，可以戳我的 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，这些文件并不影响项目运行，大概说一下它们的作用。
.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。
<!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项目还差了很多，没有热加载，没有代码检查等等等...好像就能运行一下，别急，一步一个脚印慢慢来，请听下回分解。
