Web 开发可能会让人不知所措，框架和工具不断变化。以下是一些对我自己的项目非常有用的建议，这些项目强调简单性、稳定性和可预测性。我在这里提出的建议仅适用于高质量且将来不太可能发生重大变化的工具。
就像我在这个博客上写的大多数东西一样，我的目标读者或多或少是“如果我还不知道这些东西的话我”，所以如果你说的是一个对 nodejs 等不太熟悉并且只是想要的 C++ 开发人员写一点 TypeScript 那么这篇文章就是为你准备的。人们对这些东西有很多强烈的意见——在我看来，太强烈了，当很多细节真的无关紧要时，尤其是考虑到网络时尚是多么异想天开——但如果你是这样的人，那么这个帖子肯定不适合你！
首先，我们不打算使用任何预配置的模板存储库。像这样的博客文章似乎通常以“复制我的设置”开头，但这感觉与我想要的相反——我想要尽可能少的移动部件，并且能够理解我使用的部件是做什么的。
相反，我们从头开始：
$ mkdir myproject $ cd myproject
接下来，对于前端工具，npm 是不可避免的。 （安装 nodejs/npm 超出了这里的范围，因为它依赖于操作系统，但它很简单。）让你的项目成为 npm 依赖项的根目录，绕过任何问题：
$ npm init -y
这会生成package.json 。它的大部分内容不是必需的，请随意编辑。
有了 npm，我们就可以安装 TypeScript。我认为 TypeScript 是保持理智编写 JS 的最低限度，它是一个独立的依赖项。我们为每个项目安装一个 TypeScript 副本，因为我们希望将 TypeScript 编译器版本固定到项目中，这使得它可以在新的 TypeScript 版本发布时对比特流进行弹性处理。
$ npm install typescript
这会将编译器下载到node_modules目录，更新package.json并添加package-lock.json ，它记录了编译器的固定版本。
接下来，我们将存储库标记为 TypeScript 根目录。
$ npx tsc --init
请注意那里的命令是npx ，这意味着“运行在本地 node_modules 中找到的二进制文件”。 tsc是 TypeScript 编译器， --init让它生成一个tsconfig.json来配置编译器。该文件的大部分内容已被注释掉；默认值大多很好。
此时，如果您创建任何.ts文件，VSCode 等将在您编辑时对它们进行类型检查。运行npx tsx将进行类型检查并将.ts文件转换为.js 。
创建一些简单的输入来尝试一下：
$ echo "document.write('hello, world');" > main.ts $ echo "<script src='main.js'></script>" > index.html
不幸的是，TypeScript 只负责单个文件的翻译，默认情况下会以与 nodejs 但与浏览器不兼容的格式生成导入。任何现实的 Web 项目都将涉及多个源文件或依赖项，并且需要最后一个工具，即“捆绑器”。
通常这就是 webpack 等工具介入的地方，你的复杂性预算会立即被耗尽。相反，我推荐 esbuild，它（与本文的精神一致）最小、独立且快速。
因此，将 esbuild 添加为依赖项，将副本下载到node_modules中：
$ npm install esbuild
我们以两种方式调用 esbuild：生成输出包和开发时。 （如果你只是愿意在每次编辑后运行它，你真的只需要前者，但两者都很容易做到，而且它节省了对其他工具的需求。）
esbuild没有配置文件；它仅通过命令行标志进行管理。从输入文件生成单文件包的命令如下所示：
$ npx esbuild --bundle --target=es2020 --sourcemap --outfile=main.js main.ts
这会通过爬取在给定输入文件中找到的导入来生成文件main.js --sourcemap标志允许您在浏览器中调试.ts源代码。 （您需要将*.js和*.js.map添加到您的.gitignore 。）
您可以将此命令粘贴到 shell 脚本或 Makefile 中，也可以将其粘贴到scripts块中的package.json中：
"scripts": { "bundle": "esbuild --bundle --target=es2020 --sourcemap --outfile=main.js main.ts" }并通过npm run bundle调用它。 （请注意，您不需要package.json命令中的npx前缀，它知道自己找到二进制文件。）
最后，在开发时使用 esbuild 的另一种方法是让它运行一个 Web 服务器，该服务器在您重新加载页面时自动捆绑。这意味着您可以保存并点击重新加载以获得更新的输出，而无需运行任何构建命令。这也意味着您将通过 HTTP 而不是直接加载应用程序，这是某些 Web API（如fetch ）工作所必需的。
此处的 esbuild 命令与上面的命令完全相同，只是添加了一个标志：
$ npx esbuild [above flags] --servedir=.
当你运行它时，它会打印一个 URL 来加载。该 Web 服务器逐字提供index.html （以及*.css等其他文件），但特别是当浏览器加载main.js时，它将管理从 TypeScript 转换它。
请注意， esbuild命令不会运行任何 TypeScript 检查。如果您的编辑器没有为您运行 TypeScript 检查，您仍然可以自己调用npx tsc （和在 CI 上）。如果你这样做，我建议 twiddling tsconfig.json取消注释
"noEmit": true,一行，这样 TypeScript 就不会发出任何输出——您只想为此使用一个工具 (esbuild)。
这样，您就可以开始了！
您可能对建议有一些后续问题，我将以列表形式总结：
- 自动格式化。 prettier 是标准但笨重的，其设置与此处其他工具的设置方式类似。 dprint 是我更喜欢的较新的替代品，但它更新且风险更大。
- 掉毛。生态系统的当前状态是一团糟，我建议避免它。
- CSS 语言。对我来说太复杂了，也可能是因为我的项目在视觉上往往不那么复杂。
- 网络框架。这是一个复杂得多的主题，值得一个附录！
附录：网络框架。
以上是您入门所需的全部内容，但通常您接下来可能想要的是使用某种网络框架。其中有很多，并且取决于您对框架本身的喜爱程度，将决定其自己的上述工具版本。 Web 开发中的很多变化都围绕着框架，所以如果您希望保持简单和可预测，那么采用其中任何一个可能都不是您想要的路径。
但如果您再次希望保持简单和可预测，我对 Preact 很满意，它是行业主导的 React 框架的 API 兼容实现，只有 3kb。与上述建议不同，我会注意到如果您依赖 Preact，则流失的可能性更大。但是 Preact 的一个特别好的特性是它旨在成为一个更简单的 React，因此它结合了有限的 API（由于体积小）和易于理解的标准 API。
要修改上述项目以使用 Preact，您需要安装它：
$ npm install preact
将main.ts重命名为main.tsx并更新构建命令以引用新路径。
通过更改tsconfig.json中的两个设置，告诉 TypeScript/esbuild 将.tsx文件解释为 preact：
"jsx": "react-jsx", "jsxImportSource": "preact",为了完整起见，我将把源文件更改为一个 preact hello-world。将 body 标签添加到index.html ：
<body></body> <script src='main.js'></script>
并从main.tsx调用 preact ：
import * as preact from 'preact'; preact.render(<h1>hello, world</h1>, document.body);
对于我所做的大多数事情来说，这已经足够了，希望它对你有用！
原文： https://neugierig.org/software/blog/2022/12/simple-web-hacks.html