共计 3606 个字符，预计需要花费 10 分钟才能阅读完成。
使用 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 initReact
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 文档上的相关配置，而将有限的精力放入项目业务本身。
原文链接：https://www.mi360.cn/articles…
