本文详细记录了从零手动搭建React开发环境的过程，旨在替代官方create-react-app的复杂配置。内容涵盖npm仓库加速、Webpack4模式指定、Babel语法转换及antd按需加载等核心依赖的配置，并提供了完整的package.json与webpack配置文件示例，帮助开发者快速掌握前端构建工具链的基础用法。
写在前面
手动搭建React环境的目的与背景
为了深入学习React和Webpack的相关知识，考虑到官方脚手架的配置过于繁琐，我决定尝试手动搭建一个开发环境。整个过程参考了从零搭建React全家桶框架的教程，整体步骤大致相同。
与Vue和Angular类似，React也提供了专门的脚手架工具，这极大地简化了开发流程。React官方推荐的脚手架工具是create-react-app。
安装脚手架与npm仓库配置
安装脚手架工具
通过npm下载create-react-app，执行以下命令：
npm install -g create-react-app由于国内访问npm仓库速度较慢或经常下载失败，可以指定镜像源进行下载：
npm install -g create-react-app --registry https://registry.npm.taobao.org或者，直接配置npm的默认仓库地址：
npm config set registry https://registry.npm.taobao.org 项目依赖总览与Webpack4配置要点
第一步：依赖总览
目前项目处于半成品阶段，主要完成了开发模式下的相关操作，包括添加babel、less支持以及antd的按需加载功能。整体的package.json配置如下：
{
"name": "myreact",
"version": "1.0.0",
"description": "test react",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config config/webpack.base.config.js --hot --mode development"
},
"keywords": [
"test",
"react"
],
"author": "xxxx",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.1.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-import": "^1.8.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"postcss-import": "^12.0.0",
"postcss-loader": "^3.0.0",
"react-hot-loader": "^4.3.4",
"style-loader": "^0.22.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"dependencies": {
"antd": "^3.8.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-router-dom": "^4.3.1"
}
}
当前配置的依赖中需要注意，Webpack4与早期版本可能存在差异（具体取决于是否注意到某些细节）。如果在script属性中通过CLI方式运行，需要安装webpack-cli；若通过命令行参数运行，则需安装webpack-command。当然，同时安装两者通常也不会出现问题。这是与参考教程中配置不同的地方。
此外，Webpack4需要明确指定production|development（production或development），因此我在dev脚本中使用了--mode development参数。这也是原教程中未提及的部分。
Babel语法转换与按需加载配置
关于Babel的配置
Babel的相关依赖包括babel-core,babel-loader,babel-preset-es2015,babel-preset-react,babel-preset-stage-0等。此外，你可能会注意到babel-plugin-import未被提及，该模块主要用于实现antd的按需加载。详细的.babelrc文件内容如下：
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"react-hot-loader/babel",
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
}
上述为Babel的配置，presets字段包含三个模块：es2015用于处理ES6语法，react用于处理JSX语法，stage-0用于支持最新语言特性。
在plugins配置中，react-hot-loader/babel用于实现热更新且保持状态，这一点教程中已有说明。下方的import配置对应前文提到的babel-plugin-import，这是antd官方推荐的按需加载配置方式。
另外需要指出，部分新特性可能支持不足。例如，若需使用async/await语法，可能需要额外安装babel-plugin-transform-runtime模块。同时，babelrc文件中的plugins部分还需配置"transform-runtime"插件，以支持这些新特性。
依赖相关的配置就介绍到这里。
Webpack核心配置与功能限制
Webpack的配置
我在根目录下的config目录中创建了webpack.dev.config.js,，具体配置如下：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
/*入口*/
entry: ['react-hot-loader/patch',path.join(__dirname, '../src/index.js')],
/*输出到dist文件夹，输出文件名字为bundle.js*/
output: {
path: path.join(__dirname, '../dist'),
filename: 'bundle.js'
},
devServer: {
contentBase: path.join(__dirname, '../dist'),
historyApiFallback: true
},
module: {
rules: [{
test: /\.js[x]?$/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, '../src')
},{
test: /\.css$/,
use: ['style-loader','css-loader','postcss-loader'],
},
{
test: /\.less$/,
use:[ 'style-loader',
{loader: 'css-loader',options:{importLoaders:1}},
'less-loader'],
}]
},
plugins:[new HtmlWebpackPlugin({
title:'react测试',
template:'./src/index.html',
filename:'./dist/index.html'
})],
devtool: 'inline-source-map',
resolve:{
alias: {
"@":path.join(__dirname, '../src/')
}
}
};
这部分配置相对简单，主要涉及loader的配置。目前完成了js(x)和css/less的处理，以及其他常规CLI配置，暂未包含url-loader,file-loader和代码分割等功能。
总结
目前的配置较为简陋，功能尚不完善，后续仍需完善许多工作。不过，自己动手实践确实能带来不少收获……
项目的GitHub地址为diy-react-cli，欢迎大家访问交流！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。