前言
在现代 Web 开发中，前端工程化已经成为了必备的技能。而在前端工程化的实践中，Webpack 已经成为了最流行的构建工具之一。Webpack 作为一个模块打包器，可以将多个模块打包成一个文件，以提高网站的性能和可维护性。同时，Webpack 也支持各种各样的插件和 Loader，可以让我们轻松地处理各种资源文件，例如 CSS、图片、字体等等。
React 是一个非常流行的前端框架，它可以让我们轻松地构建复杂的用户界面。而 TypeScript 则是一种静态类型检查器，它可以让我们在开发过程中发现类型错误，从而提高代码的可维护性和可读性。在本文中，我们将介绍如何使用 Webpack4 来配置 React+TypeScript 的开发环境，以便于我们开发和维护复杂的 React 应用程序。
安装 Node.js 和 TypeScript
首先，我们需要安装 Node.js 和 TypeScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它可以让我们在服务器端运行 JavaScript 代码。而 TypeScript 则是一种由 Microsoft 开发的静态类型检查器，它可以让我们在编写代码时发现类型错误。
在安装 Node.js 时，我们建议使用 nvm（Node Version Manager）来管理 Node.js 的版本。nvm 可以让我们轻松地切换不同版本的 Node.js，以便于我们在不同的项目中使用不同的 Node.js 版本。
# 安装 nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash # 刷新终端 source ~/.bashrc # 安装 Node.js nvm install 14.17.6
安装完 Node.js 后，我们可以使用 npm（Node Package Manager）来安装 TypeScript。
npm install -g typescript
初始化项目
在安装完 Node.js 和 TypeScript 后，我们可以开始初始化一个新项目。我们将使用 npm init 命令来初始化一个新的 Node.js 项目。
mkdir my-app cd my-app npm init -y
安装依赖
在初始化项目后，我们需要安装一些依赖。具体来说，我们需要安装以下依赖：
- react：React 库
- react-dom：React DOM 库
- typescript：TypeScript 编译器
- webpack：Webpack 打包工具
- webpack-cli：Webpack 命令行工具
- webpack-dev-server：Webpack 开发服务器
- babel-loader：Babel Loader，用于将 ES6+ 代码转换为 ES5 代码
- @babel/core：Babel 核心库
- @babel/preset-env：Babel 预设，用于将 ES6+ 代码转换为 ES5 代码
- @babel/preset-react：Babel 预设，用于将 JSX 代码转换为 JavaScript 代码
- @babel/preset-typescript：Babel 预设，用于将 TypeScript 代码转换为 JavaScript 代码
- @types/react：React 类型定义文件
- @types/react-dom：React DOM 类型定义文件
npm install react react-dom typescript webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript @types/react @types/react-dom --save-dev
配置 TypeScript
在安装完依赖后，我们需要在项目根目录下创建一个 tsconfig.json 文件来配置 TypeScript 编译器。
{
"compilerOptions": {
"target": "es5",
"module": "es6",
"jsx": "react",
"strict": true,
"esModuleInterop": true
},
"exclude": [
"node_modules"
]
}target：指定 TypeScript 编译器的目标 JavaScript 版本。我们将其设置为 ES5。module：指定 TypeScript 编译器的模块格式。我们将其设置为 ES6。jsx：指定 TypeScript 编译器如何处理 JSX 代码。我们将其设置为 React。strict：开启严格模式，以便于在编写代码时发现类型错误。esModuleInterop：开启该选项后，可以让我们使用 import/export 语法来导入和导出模块。
配置 Babel
在配置完 TypeScript 编译器后，我们需要配置 Babel，以便于将 ES6+ 代码转换为 ES5 代码。我们需要在项目根目录下创建一个 .babelrc 文件来配置 Babel。
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
}在上面的配置中，我们使用了三个预设：
@babel/preset-env：用于将 ES6+ 代码转换为 ES5 代码。@babel/preset-react：用于将 JSX 代码转换为 JavaScript 代码。@babel/preset-typescript：用于将 TypeScript 代码转换为 JavaScript 代码。
配置 Webpack
在配置完 TypeScript 和 Babel 后，我们需要配置 Webpack。我们需要在项目根目录下创建一个 webpack.config.js 文件来配置 Webpack。
const path = require('path');
module.exports = {
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript'
]
}
}
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};在上面的配置中，我们做了以下几件事情：
entry：指定 Webpack 的入口文件。output：指定 Webpack 的输出文件。resolve：指定 Webpack 解析模块时的文件后缀名。module：指定 Webpack 如何处理不同类型的模块。在这里，我们使用了 Babel Loader 来处理 TypeScript 代码。devServer：指定 Webpack 开发服务器的配置。
编写代码
在完成了上述配置后，我们可以开始编写代码了。我们可以在 src 目录下创建一个 index.tsx 文件，用于渲染 React 组件。
import React from 'react';
import ReactDOM from 'react-dom';
interface AppProps {
name: string;
}
const App: React.FC<AppProps> = ({ name }) => {
return (
<div>
<h1>Hello, {name}!</h1>
</div>
);
};
ReactDOM.render(<App name="TypeScript" />, document.getElementById('root'));运行项目
在完成了上述步骤后，我们可以使用以下命令来启动 Webpack 开发服务器：
npx webpack serve
然后，我们可以在浏览器中访问 http://localhost:9000 来查看我们的应用程序。
总结
在本文中，我们介绍了如何使用 Webpack4 来配置 React+TypeScript 的开发环境。我们首先安装了 Node.js 和 TypeScript，并初始化了一个新项目。然后，我们安装了必要的依赖，并配置了 TypeScript、Babel 和 Webpack。最后，我们编写了一个简单的 React 组件，并使用 Webpack 开发服务器来运行我们的应用程序。希望这篇文章能够帮助你更好地理解如何使用 Webpack4 来配置 React+TypeScript 的开发环境。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bd9adcadd4f0e0ff74c0a0