内容简介：作者：Dr. Axel Rauschmayer
每日前端夜话 第321篇
翻译： 疯狂的技术宅
作者：Dr. Axel Rauschmayer
来源：2ality
正文共：2437 字
预计阅读时间：10 分钟
本文介绍了如何通过 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 代码运行单元测试。
原文链接
https://2ality.com/2020/04/webpack-typescript.html
2020年京程一灯全新课程体系推出，点击文末 阅读全文 查看细节。
愿你在新的一年里保持技术领先，有个好前程，愿你年薪400K。我们是认真的 ！
长按二维码，加大鹏老师微信好友
拉你加入前端技术交流群
唠一唠怎样才能拿高薪
✎ 往期精彩回顾
从 JavaScript、ES6、ES7 到 ES10，你学到哪儿了？
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
MySQL技术内幕
姜承尧 / 机械工业出版社 / 2013-5 / 79.00元
《MySQL技术内幕:InnoDB存储引擎(第2版)》由国内资深MySQL专家亲自执笔，国内外多位数据库专家联袂推荐。作为国内唯一一本关于InnoDB的专著，《MySQL技术内幕:InnoDB存储引擎(第2版)》的第1版广受好评，第2版不仅针对最新的MySQL 5.6对相关内容进行了全面的补充，还根据广大读者的反馈意见对第1版中存在的不足进行了完善，《MySQL技术内幕:InnoDB存储引擎(第2......一起来看看 《MySQL技术内幕》 这本书的介绍吧!
