构建React开发环境
使用Yarn包管理工具，基于Webpack构建工具，搭建React开发环境
由于一些软件安装跟系统环境相关，故这里查看本文档，需要根据自己的系统环境，选择相对应的系统版本。
本文运行环境
system：macos
react：16.8.6
react-dom：16.8.6
webpack：4.36.1
Yarn
Yarn 是一个快速、可靠、安全的依赖管理工具，又 faceback开源
Yarn 通过一组丰富的命令执行包的安装、管理、发布等操作。
Yarn 与 Npm的许多功能是相同的，包的元数据格式也是一样的，因此可以无痛迁移到 Yarn。
中文文档：https://yarn.bootcss.com/docs...
MacOS系统安装Yarn
brew install yarn
在一个空目录下，用 Yarn初始化一个新项目
yarn init
React
react用于构建用户界面的 JavaScript 库
官方文档：https://zh-hans.reactjs.org/
安装项目运行依赖 react包 和 react-dom包
yarn add react react-dom
安装项目开发依赖 webpack 和 webpack-cli 包
yarn add -D webpack webpack-cli html-webpack-plugin
配置webpack编译项目
创建项目目录
mkdir -p src/js src/pages
编写项目初始文件
// html
vi src/pages/index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
// javascript
vi src/js/index.js
alert('hello')编写webpack配置文件
vi webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
mode: 'development',
// 入口
entry: {
app: './src/js/index'
},
// 输出
output: {
filename: "[name].js",
path: path.join(__dirname, 'build')
},
// 插件，这里使用一个 html-webpack-plugin插件，编译的时候会将编译的js文件自动引入html文件中
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/pages/index.html'
})
],
}
module.exports = config;编辑package.json文件，添加一个scripts命令build
"scripts": {
"build": "webpack"
},使用webpack打包，在命令行运行
yarn run build
如果没有出错的话，在项目目录下的build目录中会出现两个文件app.js和index.html
可以启动一个webserver来运行build目录中的文件
上面如果不出错的情况下，我们开发配置webpack编译React项目
编写文件
vi /src/js/index.js
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, World!</h1>,
document.getElementById('root')
);react使用一种jsx语法，需要使用babel编译
babel文档：https://www.babeljs.cn/setup#...
安装babel
yarn add -D babel-loader @babel/core
编写webpack配置文件
vi webpack.config.js
vi webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
mode: 'development',
// 入口
entry: {
app: './src/js/index'
},
// 输出
output: {
filename: "[name].js",
path: path.join(__dirname, 'build')
},
// 插件，这里使用一个 html-webpack-plugin插件，编译的时候会将编译的js文件自动引入html文件中
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/pages/index.html'
})
],
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
},
}
module.exports = config;安装babel对react的 preset
文档：https://www.babeljs.cn/docs/b...
yarn add -D @babel/preset-react
添加 .babelrc配置文件，并写入
{
"presets": ["@babel/preset-react"]
}一切就绪，再次运行webpack打包
yarn run build
再次使用webserver运行build目录下的文件，进行测试
ok，在这里基本就已经完成开发环境的搭建
优化
我们发现打包后的app.js文件太大，app.js将react和react-dom源码也打包进了app.js文件，我们需要将其摘出来，react和react-dom可以使用官网上给出的CDN地址，在index.html文件用手动引入。
再次配置webpack
vi webpack.config.js
vi webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
mode: 'development',
// 入口
entry: {
app: './src/js/index'
},
// 输出
output: {
filename: "[name].js",
path: path.join(__dirname, 'build')
},
// 插件，这里使用一个 html-webpack-plugin插件，编译的时候会将编译的js文件自动引入html文件中
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/pages/index.html'
})
],
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
},
// 过滤
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
}
}
module.exports = config;在index.html文件中引入react的cdn
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>再次运行webpack打包
yarn run build
检查打包后app.js文件是否小了？
再次启动一个webserver运行测试
总结
前端工具繁多，千变万化，不同的版本，可能相关配置都不一样，所以我们要学会看相关官方文档，一切以官方文档为准则，适当的囫囵吞枣，不用知其意，直接copy文档上的相关配置，而将有限的精力放入项目业务本身。