react16开发环境搭建

最近想学node，需要编写配套的前端页面，想着顺带把新的react特性都了解一遍，又不想用Create React App 创建一个新的项目，想着还是自己搭建一个react项目，写下开发环境搭建。

1. 在本地创建一个文件夹，我创建的文件夹是reactDemo，打开命令行，进入reactDem文件目录
2. 用yarn或npm初始化项目

yarn init

一路按回车，初始化项目，当然你也可以填写相关的信息。

4. 安装包
   react开发环境运行需要安装多个包，用npm或yarn安装如下npm包
   如：yarn add webpack --save-dev

	 "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-polyfill": "^6.26.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4"

webpack除了安装在本地文件夹中，还需要全局安装

arn add webpack -g

以上只截取了安装webpack的截图，安装后出现版号后即表示安装成功，出现了Warning可忽略，出现了Err表示安装失败，需要重新安装。

babel-loader8.x版本安装问题：
差不多一年多没有从零开始搭建react的项目了，babel-loader升级到了8.X，相关的依赖babel-core等都换了，react的babel编译包和package.json的rules项配置也发生了部分改变。

4. webpack文件配置
   在当前目录下创建webpack.config.js文件，添加如下配置：

const path = require('path');

module.exports = {
  mode: 'development',//当前环境模式
  entry: path.resolve(__dirname, './src/index.js'),//入口文件
  output: {
    path: path.resolve(__dirname, './dist'), //打包后文件存放的地方
    filename: 'js/[name].js',
  },

  module: {
    noParse: /node_modules\/(jquey|moment|\.js)/, //module.noParse 配置哪些文件可以脱离webpack的解析
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', "@babel/preset-react"]
        }
      }
    }]
  }
};

在src目录下新建index.js，写入如下代码：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('appRoot')
);

打开package.json，新增如下配置：

"scripts": {
    "serve": "webpack --config webpack.config.js"
  },

"serve"是命令行的执行语句，保存更改，我们在命令行中执行

yarn serve

出现如上信息，代表编译成功，在目标HTML文件中引入编译后的JS即可。
整个目录结构如下：

一个简单的react编译环境搭建完成了，要加载CSS和字体相关配置还需要配置css和font类的包。有时间再补充吧。