简介：本教程详细介绍了如何不依赖 create-react-app ，而是使用最新的Webpack 4和Babel 7来从头构建React项目。Webpack负责打包资源，而Babel则用于转换JavaScript代码，使之兼容旧浏览器。文章将引导读者理解如何安装必要依赖、创建Webpack配置文件和 .babelrc 文件，并详细说明了整个配置流程，包括项目开发和生产环境的构建。通过实践，读者将获得对构建过程的深入理解，并能够自由地定制开发环境。 
1. React项目配置
1.1 基础环境搭建
React项目的配置从搭建基础环境开始。首先确保你已经安装了Node.js和npm。这是搭建React应用所必需的，因为它们提供了运行时和包管理器。你可以通过访问Node.js官网下载最新版本的Node.js，它会自动包含npm。安装完成后，你可以通过运行 node -v 和 npm -v 来验证Node.js和npm是否正确安装。
1.2 使用Create React App
配置React项目的下一步是使用Create React App。这是一个官方提供的脚手架工具，可以快速创建React项目的配置。它会自动设置好开发服务器、Webpack配置、Babel配置等。通过全局安装create-react-app包，然后运行 create-react-app my-app 命令创建一个新项目。这里 my-app 是你项目的名字，你可以按照自己项目的需要进行命名。
1.3 配置编辑器和开发环境
完成项目创建后，需要配置你的开发环境。编辑器方面，Visual Studio Code是一个不错的选择，它有丰富的React插件支持。安装EditorConfig插件和ESLint插件可以帮助维护代码的一致性和质量。接下来，通过 npm start 启动你的React项目，这将会在本地启动一个开发服务器，并且在浏览器中打开你的应用。这个时候，你应该可以看到React提供的默认页面，表明你的开发环境已经配置成功。
2. Webpack 4打包机制
2.1 Webpack核心概念解析
2.1.1 入口(entry)和出口(output)
Webpack 的打包机制首先从配置入口文件开始，而出口配置则定义了打包后的文件应输出到何处。入口(entry)和出口(output)是 Webpack 配置文件中最为基础且关键的两个部分。
在 webpack.config.js 文件中，我们定义如下：
module.exports = {
// 定义入口文件路径
entry: './src/index.js',
// 定义出口配置
output: {
// 打包后的文件名
filename: 'bundle.js',
// 打包后的目录路径
path: __dirname + '/dist'
}
};
此处 entry 指向了项目的根 JS 文件，而 output 则指定了打包生成的文件将存放在项目的 dist 目录下，文件名为 bundle.js 。这个配置对于 Webpack 来说至关重要，因为它决定了 Webpack 从何处开始打包，以及打包后的文件如何组织。
2.1.2 加载器(loaders)与插件(plugins)
加载器(loaders)和插件(plugins)是 Webpack 打包机制中的两个重要概念，它们各自承担不同的任务，共同完成了从源代码到最终输出的整个过程。
加载器(loaders) 是用于对模块的源代码进行转换。比如， babel-loader 用于将 ES6 转换为 ES5， style-loader 和 css-loader 用于处理 CSS 文件等。加载器执行顺序是从右到左或从下到上，具体取决于配置写法。
下面是一个典型的加载器配置示例：
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
插件(plugins) 可以执行范围更广的任务，比如打包优化、资源管理和环境变量注入等。 HtmlWebpackPlugin 插件用于自动生成 HTML 文件，并将打包输出的 bundle.js 引入到 HTML 中。 CleanWebpackPlugin 用于在每次构建前清理 dist 目录。
一个常见的插件配置示例：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
// ...
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
2.1.3 代码分割与懒加载
随着应用的增长，项目代码可能会变得庞大，此时代码分割(code splitting)和懒加载(lazy loading)成为 Webpack 中非常重要的优化手段。
代码分割 允许将代码拆分成若干个包，这将有利于提高应用的加载性能和运行性能。懒加载是一种特殊形式的代码分割，它会将应用中不常使用的代码拆分到一个单独的包中，并在需要时才加载它们。
// 使用import动态导入实现懒加载
button.addEventListener('click', () => {
import('./lazy-module.js').then((module) => {
// 使用模块
});
});
通过动态导入(Dynamic Imports)或 import() 语法，我们能将一个 lazy-module.js 文件的加载推迟到点击事件发生时。
2.2 Webpack性能优化
2.2.1 打包速度优化
打包速度是衡量 Webpack 性能的一个重要指标，优化打包速度可以从减少解析时间、优化代码和模块处理等多个方面进行。
- 使用 HAPPY PACK 插件 ：通过多进程并发执行代码转换，HAPPY PACK 可以显著减少构建时间。对于那些 CPU 密集的任务尤其有效，如 Babel、TypeScript 编译等。
- 减少 resolve 配置 ：
resolve配置项中的extensions和alias字段需要谨慎使用，减少配置项可以减少查找模块的时间。 - 外部扩展(externals) ：对一些大型库，如 jQuery，可以不将其打包到应用中，而是通过 CDN 或其他方式引入。
- 使用 DllPlugin ：将第三方库独立出来，与应用代码分开打包，通过 DllPlugin 创建一个包含所有第三方库的单独 bundle，应用代码 bundle 中则不再包含这些库。
2.2.2 代码体积压缩
代码体积的大小直接影响了应用的加载速度和性能，因此需要进行压缩处理。Webpack 自带的 TerserPlugin 可用于压缩 JavaScript 代码，同时 OptimizeCssAssetsPlugin 可以压缩 CSS。
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
// TerserPlugin 配置项
})
]
}
};
2.2.3 持久化缓存配置
持久化缓存可以利用缓存来避免对已解析模块的重复解析，这样可以加快 Webpack 的重新打包速度。可以通过配置 cache 选项来启用持久化缓存：
module.exports = {
// ...
cache: {
type: 'filesystem',
buildDependencies: {
config: [__filename]
}
}
};
在这个配置中，Webpack 将使用文件系统来缓存模块信息，这样在后续构建中，Webpack 将直接从缓存中读取信息，而无需重新解析，从而提高构建速度。
graph LR
A[开始打包] --> B[解析入口文件]
B --> C[应用加载器和插件]
C --> D[生成模块图]
D --> E[代码分割]
E --> F[优化和压缩代码]
F --> G[持久化缓存]
G --> H[打包完成]
通过上述步骤，Webpack 的打包机制能够将源代码高效、模块化地转换并输出为浏览器可识别的资源，同时通过多种优化手段来提升性能。
3. Babel 7代码转换
3.1 Babel的转译流程
3.1.1 Babel预设(presets)和插件(plugins)的使用
Babel是一个广泛使用的JavaScript编译器，主要用于将ECMAScript 2015+代码转换为向后兼容的JavaScript代码，以便在旧版浏览器或其他环境中运行。Babel通过使用预设(presets)和插件(plugins)来实现对现代JavaScript代码的转译。
预设是一组已经配置好的插件集合，用于支持一组特定版本的JavaScript特性。例如， @babel/preset-env 可以根据目标环境配置自动确定需要转译的JavaScript特性。使用预设可以让开发者不必手动添加每个需要的插件。
// .babelrc
{
"presets": ["@babel/preset-env"]
}
插件则是更为细粒度的工具，可以进行更具体的代码转换工作。比如 @babel/plugin-transform-arrow-functions 插件可以将箭头函数转换为传统函数。由于Babel本身不做任何事情，所有实际的转译工作都是由这些插件完成的。
// .babelrc
{
"plugins": ["@babel/plugin-transform-arrow-functions"]
}
Babel的工作流程包括解析(source code)、转译(transforming)和生成(generating)。首先，代码通过解析器(parser)被解析成抽象语法树(AST)，然后经过一系列的插件处理转换成新的AST，最终通过生成器(generator)输出目标代码。
3.1.2 解析器(parser)与生成器(generator)
解析器parser的主要职责是将源代码转换成抽象语法树(AST)，这是一个表示编程语言语法结构的树状数据结构。Babel使用一个名为 babel-parser 的解析器，它是基于 acorn 的，用于将源代码转换为AST。
生成器则是负责将经过Babel转译后的新AST生成目标代码的过程。这一过程中可以使用特定的代码格式化策略，如 babel-generator 包，它输出格式化的代码，并且包含源码映射(source maps)，这对调试转译后的代码是非常有帮助的。
// 代码块展示了Babel解析器和生成器的一个简单示例
// 原始JavaScript代码
const message = 'Hello, Babel!';
console.log(message);
// 使用Babel解析器解析代码
const parser = require('@babel/parser');
const ast = parser.parse('const message = \'Hello, Babel!\'; console.log(message);', {
sourceType: 'module'
});
// 假设我们添加了一个插件，将const转换成var
// 使用生成器输出转换后的代码
const generator = require('@babel/generator');
const { code } = generator(ast);
console.log(code);
通过上述过程，开发者可以针对不同版本的JavaScript进行转译，使得先进的代码特性能够在老旧的环境中运行，大大提升了JavaScript的兼容性和开发的便捷性。
3.2 Babel配置详解
3.2.1 .babelrc 文件的结构和作用
Babel的配置文件通常是 .babelrc ，它位于项目根目录下。这个文件告诉Babel如何处理项目中的JavaScript代码。配置文件主要包含两个部分： presets 和 plugins 。
{
"presets": [],
"plugins": []
}
presets 是一个数组，用于存放Babel预设。预设可以包含一组或多个插件，可以让你快速启用一组针对特定JavaScript版本的特性支持。
plugins 同样是一个数组，用于存放具体的插件。如果需要进行特殊的代码转换，可以在这一部分添加相应的插件。
Babel的配置还支持继承 package.json 中的配置，甚至可以通过命令行参数直接指定配置。这为不同的项目和环境提供了灵活性。
{
"babel": {
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
}
在 .babelrc 文件中，还可以配置其他选项如 sourceMaps ， ignore ，和 only 等，以满足更复杂的使用场景。
3.2.2 Babel与Webpack的集成
Babel通常与Webpack一起使用，以支持现代JavaScript代码的打包和转换。Webpack是一个强大的模块打包工具，而Babel则负责代码的转译部分。要将Babel集成到Webpack中，需要使用 babel-loader 。
安装 babel-loader 及其依赖项：
npm install --save-dev babel-loader @babel/core @babel/preset-env webpack
接下来，配置 webpack.config.js 以启用Babel：
// webpack.config.js
module.exports = {
//...
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
//...
};
在上述配置中， test 选项用于正则表达式匹配JavaScript文件， exclude 选项用于排除 node_modules 目录，而 use 选项则指定了 babel-loader 以及对应的预设。通过这样的配置，所有JavaScript文件在Webpack打包的过程中都会通过Babel进行转译。
3.2.3 环境变量在Babel配置中的应用
在项目中，经常需要根据不同的环境来调整Babel的配置。例如，在开发环境中可能需要更多的日志输出和调试信息，而在生产环境中则希望代码尽可能地优化和压缩。在Babel配置中可以使用环境变量来实现这一需求。
Babel提供了 env 选项，允许根据不同的环境变量来设置不同的配置：
// .babelrc
{
"presets": [
["@babel/preset-env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"plugins": ["@babel/plugin-proposal-object-rest-spread"],
"env": {
"development": {
"plugins": ["@babel/plugin-transform-runtime"]
},
"production": {
"plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-transform-react-inline-elements"]
}
}
}
在这个配置中， env 属性允许我们基于不同的环境变量应用不同的预设和插件。这样，在开发环境时，我们可以启用更多的调试功能，而在生产环境时，我们可以确保代码尽可能被压缩和优化。
Babel还提供了 --env 命令行选项来传递环境变量，或者通过 BABEL_ENV 环境变量来设定。这为自动化构建和部署流程提供了灵活性。
BABEL_ENV=production npm run build
在上述命令中，我们设置 BABEL_ENV 环境变量为 production ，随后构建命令会根据 .babelrc 中的 production 环境配置来执行转译过程。
通过上述步骤，Babel可以灵活地配置以适应不同开发阶段的需求，从而提供更优化、更便捷的开发体验。
4. 依赖安装指南
在构建现代的React项目时，依赖安装是初始化项目的第一步。理解如何正确地管理Node.js版本、使用npm安装依赖以及配置 .npmrc 文件，对于确保项目的依赖关系准确和高效至关重要。本章节将深入探讨Node.js和npm的基础知识，并指导你如何在项目中安装和管理依赖。
4.1 Node.js和npm基础
4.1.1 Node.js的版本管理
Node.js的版本管理器是确保你可以自由切换项目依赖的Node.js版本的利器。不同版本的Node.js可能对特定的库或者API有不同的支持，因此在进行项目依赖的安装前，选择正确的Node.js版本尤为重要。
管理Node.js版本通常使用的工具有 nvm 、 n 和 nodist 等。以下是使用 nvm 作为示例，演示如何安装和切换Node.js版本：
# 安装nvm
curl -o- ***
* 激活nvm并安装特定版本的Node.js
nvm install 16.14.0
# 切换到已安装的Node.js版本
nvm use 16.14.0
# 确认当前使用的Node.js版本
node -v
4.1.2 npm包管理器基础
npm是JavaScript世界的包管理器，用于安装和管理项目依赖。通过npm，你能够轻松地从npm注册中心下载各种开源库和工具。
理解以下npm基本概念至关重要：
-
package.json：项目的依赖配置文件，记录了项目的依赖关系和一些配置信息。 -
package-lock.json：确定项目依赖的版本，确保安装的一致性。 -
npm install：安装package.json中列出的依赖。 -
npm init：初始化一个新项目，创建package.json文件。
以下是如何初始化新项目并安装依赖的基本步骤：
# 初始化新项目
npm init -y
# 安装依赖
npm install <package-name>
# 安装开发依赖（开发环境安装）
npm install <dev-package-name> --save-dev
4.2 项目依赖的安装
4.2.1 初始化项目和依赖
开始一个新项目时，首先需要初始化项目结构，接着安装项目运行和开发所必需的依赖。这通常使用 npm init 和 npm install 命令完成。
# 进入项目目录
mkdir my-project
cd my-project
# 初始化项目
npm init -y
# 安装项目依赖
npm install react react-dom --save
# 安装开发依赖
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react webpack webpack-cli
4.2.2 开发依赖与生产依赖的区别
理解开发依赖和生产依赖的区别对项目维护非常重要。开发依赖通常包括编译、测试、格式化和其它开发工具，它们对生产环境的代码质量有帮助，但并不直接参与生产环境代码的执行。生产依赖是应用运行所必须的代码。
通常， package.json 中的 dependencies 字段用于列出生产依赖，而 devDependencies 字段用于列出开发依赖。以下是如何区分这两种依赖：
{
"name": "my-project",
"version": "1.0.0",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/cli": "^7.12.10",
"@babel/preset-env": "^7.12.10",
"@babel/preset-react": "^7.12.10",
"webpack": "^5.3.0",
"webpack-cli": "^4.3.1"
}
}
4.2.3 使用npm脚本简化开发流程
在 package.json 中， scripts 字段允许你定义运行项目所需的各种脚本命令。通过npm脚本，你可以将复杂的命令简化为容易记忆的命令，提高开发效率。
例如，以下脚本可以让你快速启动项目、构建和测试：
{
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production",
"test": "jest --watchAll"
}
}
执行这些脚本的命令如下：
# 启动开发服务器
npm start
# 打包生产代码
npm run build
# 执行测试
npm test
以上就是依赖安装指南的第四章内容。这一章节主要涵盖了Node.js和npm的基础知识以及如何在项目中正确安装和管理依赖。通过本章内容，你应该对项目初始化、依赖版本管理、开发与生产依赖的区别以及如何使用npm脚本有了深入的理解。这些知识和技能为构建稳定可靠的项目打下了坚实的基础。
5. webpack.config.js 配置
5.1 Webpack配置文件结构
Webpack是现代前端开发中不可或缺的工具之一，而 webpack.config.js 是定义Webpack行为和配置的主要文件。理解其结构有助于更好地控制构建过程，并解决可能出现的问题。
5.1.1 模块(module)配置
模块是Webpack处理的核心单元。通过模块配置，我们可以定义如何处理不同类型文件的规则。
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
// 其他规则...
],
}
每个规则定义了三个主要属性： test （匹配特定文件的正则表达式）、 exclude （排除的目录，防止重复处理）、 use （使用的加载器数组）。对于 .jsx 文件，我们使用 babel-loader 来转换JavaScript代码，而 .css 文件则通过 style-loader 和 css-loader 组合来处理样式。
5.1.2 插件(plugins)配置
插件用于执行更广泛的任务，如文件优化、资源管理和环境变量的注入等。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true,
removeComments: true,
},
}),
new CleanWebpackPlugin(),
// 其他插件...
]
HtmlWebpackPlugin 会自动将所有依赖注入到一个HTML文件中，而 CleanWebpackPlugin 用于在每次构建前清理输出目录。每个插件都可以根据需要配置特定选项。
5.2 高级配置技术
随着项目复杂度的增加，可能会需要一些高级配置技术来提升开发效率和构建性能。
5.2.1 环境变量的使用
Webpack允许我们根据不同的环境来设置配置，这样可以根据开发环境和生产环境的不同需求来调整配置。
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
mode: isProduction ? 'production' : 'development',
devtool: isProduction ? 'source-map' : 'eval-source-map',
// 其他配置...
}
通过设置 NODE_ENV 环境变量，我们可以控制模式（ mode ）和源码映射（ devtool ）。这不仅优化了构建过程，还帮助我们更好地调试代码。
5.2.2 开发和生产环境配置的区别
开发环境通常需要热更新（HMR）、调试工具和较快的构建速度，而生产环境则需要代码压缩、资源优化和较小的包体积。
module.exports = (env) => {
const isProduction = env === 'production';
return {
// 通用配置...
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': isProduction ? JSON.stringify('production') : JSON.stringify('development'),
}),
// 其他插件...
],
performance: {
hints: isProduction ? 'warning' : false,
},
// 其他配置...
};
}
这里使用了 webpack.DefinePlugin 来定义环境变量，并根据生产环境启用性能提示（ performance.hints ）。构建过程可以通过命令行参数 --env production 来指定。
5.2.3 自定义加载器和插件的开发
如果现有的加载器和插件不能满足项目需求，可以开发自定义的加载器和插件。
// 自定义加载器
const MyLoader = () => {
return {
apply: (compiler) => {
***pilation.tap('MyLoader', (compilation) => {
// 在这里添加自定义的处理逻辑
});
},
};
};
// 自定义插件
class MyPlugin {
apply(compiler) {
// 这里可以定义编译过程中的逻辑
}
}
自定义加载器通常用于处理文件，而插件则可以在整个构建过程中进行更多操作。自定义加载器和插件扩展了Webpack的功能，使得我们可以根据项目具体需求进行调整。
通过以上详细配置和技巧，你可以更加灵活地控制Webpack的行为，从而构建出更适合的生产环境和开发环境。随着技术的深入，你将能够进一步优化构建流程和提升项目的整体质量。
6. .babelrc 配置
6.1 Babel配置文件的作用
Babel的配置文件 .babelrc 是用来定义如何处理JavaScript代码的规则集合。它允许开发者指定预设(presets)和插件(plugins)来转换代码，以便向后兼容或者使用最新的JavaScript特性。这些配置可以决定Babel如何解析代码，将其转换为可运行的代码，并最终输出。
6.1.1 预设(presets)的配置
预设是一组已经被打包好的插件集合，用于支持特定的JavaScript特性或者转换目标。例如， @babel/preset-env 允许你使用最新的JavaScript语法，而无需为每一种新特性编写单独的插件规则。预设配置非常简单：
{
"presets": ["@babel/preset-env"]
}
6.1.2 插件(plugins)的添加和配置
除了预设，你也可以单独添加插件来处理更具体的代码转换任务。例如，如果你需要转换生成器函数，你可能会使用 @babel/plugin-transform-generators 插件：
{
"plugins": ["@babel/plugin-transform-generators"]
}
某些插件支持额外的配置选项，以便进一步定制其行为：
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"helpers": true,
"regenerator": true,
"corejs": 3
}
]
]
}
6.2 项目中的实践应用
在实际项目中， .babelrc 文件的配置将直接影响项目的构建结果。以下是一些在项目中应用 .babelrc 配置的场景。
6.2.1 针对不同文件类型的配置
有时需要对不同类型的文件应用不同的Babel配置。这可以通过创建多个配置文件来实现，然后根据文件类型或模式引用不同的配置：
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-class-properties"],
"overrides": [
{
"include": "src/utils/*.js",
"presets": ["@babel/preset-react"]
}
]
}
在这个配置中， src/utils/*.js 下的文件会使用 @babel/preset-react 进行转换，以处理React特有的语法。
6.2.2 Babel-polypill的使用和配置
Babel-polypill是一个包含多个预设和插件的集合，它为开发者提供了快速的配置方式，确保你的代码可以在各种环境中运行。加入Babel-polypill的配置可能看起来像这样：
{
"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
"plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-private-methods", "@babel/plugin-transform-runtime"]
}
这个配置包括了对ES6+特性、React和TypeScript的支持。
6.2.3 代码质量检查和风格指南配置
结合ESLint和Prettier等工具，你可以利用Babel的插件功能在代码质量检查和风格指南方面进行配置。通过插件如 eslint-webpack-plugin ，可以在构建过程中集成代码质量检查：
{
"plugins": ["@babel/plugin-transform-react-jsx", "eslint-webpack-plugin"]
}
通过这种方式，每次代码变更都会触发ESLint规则的校验，保证代码质量。
实际的 .babelrc 配置可能会更加复杂，但核心概念是相同的。无论你是在开发库还是应用程序，这些配置都能够确保代码在不同环境和浏览器中具有一致的表现。通过合理的配置，Babel可以成为项目构建中不可或缺的工具。
简介：本教程详细介绍了如何不依赖 create-react-app ，而是使用最新的Webpack 4和Babel 7来从头构建React项目。Webpack负责打包资源，而Babel则用于转换JavaScript代码，使之兼容旧浏览器。文章将引导读者理解如何安装必要依赖、创建Webpack配置文件和 .babelrc 文件，并详细说明了整个配置流程，包括项目开发和生产环境的构建。通过实践，读者将获得对构建过程的深入理解，并能够自由地定制开发环境。
扫一扫
2275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
