十分钟搞定 TypeScript + webpack 配置

每日前端夜话第321篇

翻译：疯狂的技术宅

作者：Dr. Axel Rauschmayer

来源：2ality

正文共：2437 字

预计阅读时间：10 分钟

Rfei6bR.png!web

本文介绍了如何通过 TypeScript 和 webpack 创建 Web 应用程序。我们仅使用 DOM API，而不使用特定的前端框架。源码文件 ts-demo-webpack 可以从 GitHub 下载 (https://github.com/rauschma/ts-demo-webpack) 。

必需的知识：如果你对 TypeScript，webpack 和 npm 的工作原理有一个大概的了解，那么它会有所帮助。

局限性

通过 TypeScript 和 npm 使用 ES 模块仍然很脆弱。所以我们将会坚持将 CommonJS 模块捆绑为脚本文件。

代码库 ts-demo-webpack

存储库 ts-demo-webpack 的结构如下：

 1ts-demo-webpack/
 2  build/   (created on demand)
 3  html/
 4    index.html
 5  package.json
 6  ts/
 7    src/
 8      main.ts
 9  tsconfig.json
10  webpack.config.js

为了构建 Web 应用程序，我们需要将两组文件编译到目录 build/ 中：

TypeScript 文件存储在 ts/ 中。
HTML 文件存储在 html/ 中。

这两个任务都由 webpack 处理：

对于 TypeScript，webpack 从 main.ts 开始处理，找到所有使用的 TypeScript 和 JavaScript 文件，并将它们编译成单个脚本文件 build/main-bundle.js 。此过程称为 bundling 。为了将 TypeScript 编译为JavaScript，webpack 使用了 loader （插件） ts-loader 。
通过 webpack plugin copy-webpack-plugin 复制 html/ 中的文件。

安装、构建和运行 Web 应用

首先需要安装我们的网络应用依赖的所有 npm 软件包：

1npm install

然后，需要通过 package.json 中的脚本来运行 webpack（在上一步中也已安装）：

1npm run wpw

从现在开始，webpack 会监视存储库中的文件是否有更改，并在检测到任何修改时重新构建该 Web 应用。

在另一个命令行中，我们现在可以启动一个在本地主机上提供 build/ 内容的 Web 服务器：

1npm run serve

如果转到 Web 服务器输出的 URL，则可以看到正在运行的 Web 应用程序。

请注意，由于缓存的原因，简单的重新加载可能看不到更改后的结果。重新加载时，可能需要按 shift 键来强制重新加载。

在 Visual Studio Code 中构建

除了可以用命令行进行构建外，我们还可以在 Visual Studio Code 中通过所谓的 build task 进行构建：

从 “Terminal” 菜单中执行 “Configure Default Build Task…”。
选择 “npm: wpw”.
可选：在 .vscode/tasks.json 设置适当的问题匹配器：
```
1"problemMatcher": ["$tsc-watch"],
```

现在我们可以从 “Terminal” 菜单执行 “Run Build Task…”。

`package.json`

package.json 指定项目所依赖的脚本和 npm 软件包：

 1{
 2  "private": true,
 3  "scripts": {
 4    "tsc": "tsc",
 5    "tscw": "tsc --watch",
 6    "wp": "webpack",
 7    "wpw": "webpack --watch",
 8    "serve": "http-server build"
 9  },
10  "dependencies": {
11    "@types/lodash": "···",
12    "copy-webpack-plugin": "···",
13    "http-server": "···",
14    "lodash": "···",
15    "ts-loader": "···",
16    "typescript": "···",
17    "webpack": "···",
18    "webpack-cli": "···"
19  }
20}

"private": true 表示如果我们不提供软件包名称和软件包版本，npm 不会报错。
Scripts:
tsc，tscw ：如果我们将 webpack 与 ts-loader 一起使用，可能不会直接调用 TypeScript 编译器 tsc 。
wp ：运行 webpack 一次编译所有内容。
wpw ：用 webpack 监视，并仅编译修改过的文件。
serve ：运行服务器 http-server 并提供目录 build/ 的内容。
依赖项：
Webpack incl 支持通过 CLI（命令行界面）和插件使用： webpack 、 webpack-cli 、 ts-loader 、 copy-webpack-plugin
需要 ts-loader ： typescript
Web 应用的 Web 服务器： http-server
库以及 TypeScript 代码使用的类型定义： lodash 、 @ types/lodash

`webpack.config.js`

这是我们配置 webpack 的方式：

 1const path = require('path');
 2const CopyWebpackPlugin = require('copy-webpack-plugin');
 3
 4module.exports = {
 5  mode: "development",
 6  devtool: "inline-source-map",
 7  entry: {
 8    main: "./ts/src/main.ts",
 9  },
10  output: {
11    path: path.resolve(__dirname, 'build'),
12    filename: "[name]-bundle.js",
13  },
14  resolve: {
15    // Add ".ts" and ".tsx" as resolvable extensions.
16    extensions: [".ts", ".tsx", ".js"],
17  },
18  module: {
19    rules: [
20      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
21      { test: /\.tsx?$/, loader: "ts-loader" },
22    ],
23  },
24  plugins: [
25    new CopyWebpackPlugin([
26      {
27        from: './html',
28      }
29    ]),
30  ],
31};

有关配置 webpack 的更多信息，请参阅 webpack 网站 (https://webpack.js.org/concepts/) 。

`tsconfig.json`

此文件用来配置 TypeScript 编译器：

 1{
 2  "compilerOptions": {
 3    "rootDir": "ts",
 4    "outDir": "dist",
 5    "target": "es2019",
 6    "lib": [
 7      "es2019",
 8      "dom"
 9    ],
10    "module": "commonjs",
11    "esModuleInterop": true,
12    "strict": true,
13    "sourceMap": true
14  }
15}

如果我们把 webpack 与 ts-loader 放在一起使用，则不需要选项 outDir 。但是如果我们在不使用加载程序的情况下使用 webpack，则需要（如本文稍后所述）。

`index.html`

这是 Web 应用的 HTML 页面：

 1<!doctype html>
 2<html>
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ts-demo-webpack</title>
 6</head>
 7<body>
 8  <div id="output"></div>
 9  <script src="main-bundle.js"></script>
10</body>
11</html>

带有id output 的 <div> 是 web 应用显示其输出的位置。 main-bundle.js 包含捆绑的代码。

`main.ts`

这是 Web 应用的 TypeScript 代码：

 1import template from 'lodash/template';
 2
 3const outputElement = document.getElementById('output');
 4if (outputElement) {
 5  var compiled = template(`
 6    <h1><%- heading %></h1>
 7    Current date and time: <%- dateTimeString %>
 8  `.trim());
 9  outputElement.innerHTML = compiled({
10    heading: 'ts-demo-webpack',
11    dateTimeString: new Date().toISOString(),
12  });
13}

有关 template() 的更多信息，请参见 Lodash 的文档 (https://lodash.com/docs/4.17.15#template) 。

在没有加载器的情况下使用 webpack：`webpack-no-loader.config.js`

除了依赖于 ts-loader 之外，我们还可以先将所有 TypeScript 文件编译为 JavaScript 文件（通过 TypeScript 编译器），然后通过 webpack 捆绑这些文件。有关其工作原理的更多信息，请参见博客文章“通过TypeScript创建基于CommonJS 的 npm 软件包” (https://2ality.com/2020/04/npm-cjs-typescript.html) 。

现在，我们不必配置 ts-loader ，并且 webpack 配置文件更加简单：

 1const path = require('path');
 2
 3module.exports = {
 4  entry: {
 5    main: "./dist/src/main.js",
 6  },
 7  output: {
 8    path: path.join(__dirname, 'build'),
 9    filename: '[name]-bundle.js',
10  },
11  plugins: [
12    new CopyWebpackPlugin([
13      {
14        from: './html',
15      }
16    ]),
17  ],
18};

为什么要在捆绑中间文件之前产生中间文件？好处是我们可以用 Node.js 对某些 TypeScript 代码运行单元测试。