翻译:疯狂的技术宅
作者: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/
build/ (created on demand)
html/
index.html
package.json
ts/
src/
main.ts
tsconfig.json
webpack.config.js
为了构建 Web 应用程序,我们需要将两组文件编译到目录 build/
中:
ts/
中。html/
中。这两个任务都由 webpack 处理:
main.ts
开始处理,找到所有使用的 TypeScript 和 JavaScript 文件,并将它们编译成单个脚本文件 build/main-bundle.js
。此过程称为 bundling。为了将 TypeScript 编译为JavaScript,webpack 使用了 loader(插件)ts-loader
。copy-webpack-plugin
复制 html/
中的文件。首先需要安装我们的网络应用依赖的所有 npm 软件包:
npm install
然后,需要通过 package.json
中的脚本来运行 webpack(在上一步中也已安装):
npm run wpw
从现在开始,webpack 会监视存储库中的文件是否有更改,并在检测到任何修改时重新构建该 Web 应用。
在另一个命令行中,我们现在可以启动一个在本地主机上提供 build/
内容的 Web 服务器:
npm run serve
如果转到 Web 服务器输出的 URL,则可以看到正在运行的 Web 应用程序。
请注意,由于缓存的原因,简单的重新加载可能看不到更改后的结果。重新加载时,可能需要按 shift 键来强制重新加载。
除了可以用命令行进行构建外,我们还可以在 Visual Studio Code 中通过所谓的 build task 进行构建:
.vscode/tasks.json
设置适当的问题匹配器:
"problemMatcher": ["$tsc-watch"],
现在我们可以从 “Terminal” 菜单执行 “Run Build Task…”。
package.json
指定项目所依赖的脚本和 npm 软件包:
{
"private": true,
"scripts": {
"tsc": "tsc",
"tscw": "tsc --watch",
"wp": "webpack",
"wpw": "webpack --watch",
"serve": "http-server build"
},
"dependencies": {
"@types/lodash": "···",
"copy-webpack-plugin": "···",
"http-server": "···",
"lodash": "···",
"ts-loader": "···",
"typescript": "···",
"webpack": "···",
"webpack-cli": "···"
}
}
"private": true
表示如果我们不提供软件包名称和软件包版本,npm 不会报错。tsc,tscw
:如果我们将 webpack 与 ts-loader
一起使用,可能不会直接调用 TypeScript 编译器 tsc
。wp
:运行 webpack 一次编译所有内容。wpw
:用 webpack 监视,并仅编译修改过的文件。serve
:运行服务器 http-server
并提供目录 build/
的内容。webpack
、webpack-cli
、ts-loader
、copy-webpack-plugin
ts-loader
:typescript
http-server
lodash
、@ types/lodash
这是我们配置 webpack 的方式:
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: {
main: "./ts/src/main.ts",
},
output: {
path: path.resolve(__dirname, 'build'),
filename: "[name]-bundle.js",
},
resolve: {
// Add ".ts" and ".tsx" as resolvable extensions.
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{ test: /\.tsx?$/, loader: "ts-loader" },
],
},
plugins: [
new CopyWebpackPlugin([
{
from: './html',
}
]),
],
};
有关配置 webpack 的更多信息,请参阅 webpack 网站 (https://webpack.js.org/concepts/)。
此文件用来配置 TypeScript 编译器:
{
"compilerOptions": {
"rootDir": "ts",
"outDir": "dist",
"target": "es2019",
"lib": [
"es2019",
"dom"
],
"module": "commonjs",
"esModuleInterop": true,
"strict": true,
"sourceMap": true
}
}
如果我们把 webpack 与 ts-loader
放在一起使用,则不需要选项 outDir
。但是如果我们在不使用加载程序的情况下使用 webpack,则需要(如本文稍后所述)。
这是 Web 应用的 HTML 页面:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ts-demo-webpack</title>
</head>
<body>
<div id="output"></div>
<script src="main-bundle.js"></script>
</body>
</html>
带有id output
的 <div>
是 web 应用显示其输出的位置。main-bundle.js
包含捆绑的代码。
这是 Web 应用的 TypeScript 代码:
import template from 'lodash/template';
const outputElement = document.getElementById('output');
if (outputElement) {
var compiled = template(`
<h1><%- heading %></h1>
Current date and time: <%- dateTimeString %>
`.trim());
outputElement.innerHTML = compiled({
heading: 'ts-demo-webpack',
dateTimeString: new Date().toISOString(),
});
}
有关 template()
的更多信息,请参见 Lodash 的文档(https://lodash.com/docs/4.17.15#template)。
除了依赖于 ts-loader
之外,我们还可以先将所有 TypeScript 文件编译为 JavaScript 文件(通过 TypeScript 编译器),然后通过 webpack 捆绑这些文件。有关其工作原理的更多信息,请参见博客文章“通过TypeScript创建基于CommonJS 的 npm 软件包”(https://2ality.com/2020/04/npm-cjs-typescript.html)。
现在,我们不必配置 ts-loader
,并且 webpack 配置文件更加简单:
const path = require('path');
module.exports = {
entry: {
main: "./dist/src/main.js",
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name]-bundle.js',
},
plugins: [
new CopyWebpackPlugin([
{
from: './html',
}
]),
],
};
为什么要在捆绑中间文件之前产生中间文件?好处是我们可以用 Node.js 对某些 TypeScript 代码运行单元测试。
原文链接
https://2ality.com/2020/04/webpack-typescript.html