介绍
如果你是一名前端开发者，那么你一定会使用 webpack 和 babel 这两个工具来帮助你进行项目构建。而对于代码规范的处理，ESLint 是一个非常好的选择。然而，在 TypeScript 项目中，想要正确地配置这些工具，并使它们协同工作可能会让新手感到困惑。本文将详细介绍如何快速地配置 webpack + babel + ESLint 的 TypeScript 项目，并对代码规范进行处理。
环境
在学习本文之前，需要确保你已经安装了以下环境：
- Node.js
- NPM
步骤
1. 创建项目
首先，我们需要创建一个新的 TypeScript 项目。我们可以通过执行以下命令来完成：
mkdir my-project cd my-project npm init -y
我们得到了一个具有默认完整字段的 package.json 文件。
2. 安装依赖
接下来，我们需要添加项目所需的依赖关系。请在终端中切换到项目目录，并运行以下命令：
npm install --save-dev typescript webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/preset-typescript babel-loader eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
这里我们安装了：
- typescript：它是一个用于 JavaScript 的强类型系统，并且与 webpack 集成良好。
- webpack / webpack-cli：这是我们用于构建应用程序的工具和它的命令行接口。
- webpack-dev-server：用于提供一个可以进行热替换的环境。
- babel：用于将 ES6、TypeScript 等高级语言代码转换为浏览器可以识别的 ES5 代码。
- eslint / @typescript-eslint/parser / @typescript-eslint/eslint-plugin：用于强制执行代码规范。
然后，我们将在项目根目录中创建一个用于存储代码的文件夹：
mkdir src touch src/app.ts
3. 配置系统
TypeScript
首先，让我们开始配置 TypeScript。我们将在根目录中创建一个 tsconfig.json 文件，并将其内容更改为：
-- -------------------- ---- -------
-
------------------ -
--------- ----------
--------- ------
--------- ------
---------- -----
------------ -----
------ -------
--
---------- --------------
-在此配置中，我们配置了如下选项：
outDir：用于指定 TypeScript 输出文件所在的目录。module：指定 ESM 模块的模块系统。target：指定所编译的 JavaScript 版本。allowJs：允许在 TypeScript 代码中使用 JavaScript。sourceMap：启用 TypeScript 编译器生成的 sourceMap。jsx： TypeScript 支持的 JSX 格式。
Babel
现在，我们来配置 Babel。我们将在根目录中创建一个 .babelrc 文件，并将其内容更改为：
{
"presets": ["@babel/preset-env", "@babel/preset-typescript"]
}在此配置中，我们配置了如下选项：
presets：用于指定要使用的预设集。我们在这里指定了两个预设集，一个是通用的 ES6/7 预设集（@babel/preset-env），一个是 TypeScript 对应的预设集（@babel/preset-typescript）。
Webpack
Webpack 是我们用于打包和管理应用的工具。我们需要在根目录中创建一个 webpack.config.js 文件，并将其内容修改为：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- --------------
------ ---------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
----------- ------- ------ ---------
--
------- -
------ -
-
----- ----------
-------- ------------------------ --------
-------- -----------------
---- -
-
------- ---------------
-------- -
-------- -
--------------------
---------------------------
--
--
--
-
------- ----------------
-------- -
---- -----
------------ ------
--
--
--
--
--
--
--在此配置中，我们做了如下几件事情：
- 引入
path模块，它用于规范化路径。 - 定义 Webpack 配置的基本选项，如
entry、output等。 - 规定要解析的文件扩展名。
- 配置编译
ts文件的规则，包括使用babel-loader进行编译，并使用eslint-loader进行代码检查。
ESLint
接下来，我们在根目录中创建一个 .eslintrc 文件，并将其内容更改为：
-- -------------------- ---- -------
-
--------- ----------------------------
---------------- -
-------------- ----
--
------ -
------ -----
---------- -----
------- ----
--
---------- -
---------------------
---------------------------------------
--
---------- -
--------------------
--
-------- -
------------------------------------- ------
------------------------------------ --------- - -------------------- ---- --
-
-在此配置中，我们：
- 定义了 ESLint 解析器的类型。
- 指定了解析器选项。
- 配置了要使用的环境。
- 指定要继承的规则集合。
- 指定要加载的插件。
- 配置要忽略的规则，以及删除未使用的变量的规则。
到此为止，我们已经完成了所有的配置。现在，我们可以运行 Webpack 开发服务器并开始开发。在终端中使用以下命令启动 Webpack 开发服务器：
webpack serve --mode=development
结论
在本文中，我们详细介绍了如何快速构建 TypeScript 项目，并处理代码规范。我们了解了如何使用 webpack 进行打包、babel 进行转换、ESLint 实现代码规范检测，并使它们协同工作。希望这篇文章可以为大家提供帮助，使您更快地构建一个带有代码规范的 TypeScript 项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672abc4fddd3a70eb6d0a567