7、React与TypeScript项目搭建全攻略

React与TypeScript项目搭建全攻略

1. 使用Webpack创建项目

1.1 添加Webpack

Webpack是一个流行的工具，主要用于将JavaScript源代码文件捆绑在一起。在扫描文件时，它还可以运行其他工具，如Babel。我们将使用Webpack扫描所有源文件，并将它们转换为JavaScript。Webpack处理后的输出将是一个单一的JavaScript捆绑包，该捆绑包会在 index.html 中被引用。

1.2 安装Webpack

在Visual Studio Code的终端中执行以下步骤来安装Webpack及其相关库：
1. 首先，使用以下命令安装Webpack：

npm i -D webpack webpack-cli

此命令会安装Webpack的核心库及其命令行界面。由于Webpack包中已经包含TypeScript类型，所以无需单独安装。
2. 接下来，运行以下命令安装Webpack的开发服务器：

npm i -D webpack-dev-server

Webpack的开发服务器用于在开发过程中托管Web应用程序，并在代码发生更改时自动更新。
3. 需要一个Webpack插件来允许Babel将React和TypeScript代码转换为JavaScript，这个插件名为 babel-loader 。使用以下命令进行安装