无需（构建）工具的 Web 开发

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签工具

当开始一个将使用 javascript 的新 web 项目时，我们做的第一件事通常是设置构建和开发人员工具。比如最近很火的vite。您可能不知道并非所有 javascript（web）项目都需要复杂的构建工具。事实上，正如我将在本文中展示的那样，现在比以往任何时候都更容易摆脱困境。

使用index.html文件创建一个新项目。

          <p>hello world</p>

如果您使用的是 vs code，请安装实时预览扩展。运行。这是一个具有实时重新加载功能的简单文件服务器。你可以使用任何文件服务器，python 内置了一个：

python3 -m http.server

我喜欢实时预览，因为它在更改文件后会自动刷新页面。

您现在应该能够从浏览器访问您的index.html 文件并看到“hello world”。

接下来，创建一个index.js文件：

console.log("hello world");export {};

将其包含在您的index.html中：

<script type="module" src="./index.js"></script>

在浏览器中打开开发者控制台。如果你看到“hello world”，你就知道它正在正确加载。

浏览器现在支持 ecmascript 模块。您可以导入其他文件以消除其副作用：

import "./some-other-script.js";

或用于出口

import { add, multiply } "./my-math-lib.js";

很酷吧？请参阅上面的 mdn 指南以获取更多信息。

套餐

你可能不想重新发明轮子，所以你的项目可能会使用一些第三方包。这并不意味着您现在需要开始使用包管理器。

假设我们想使用超级结构进行数据验证。我们不仅可以从我们自己的（本地）文件服务器加载模块，还可以从任何 url 加载模块。 esm.sh 方便地为 npm 上可用的几乎所有包提供模块。

当您访问 https://esm.sh/superstruct 时，您可以看到您被重定向到最新版本。您可以在代码中包含此包，如下所示：

import { assert } from "https://esm.sh/superstruct";

如果你想安全起见，你可以固定版本。

类型

我不了解你，但 typescript 宠坏了我（并且让我变得懒惰）。在没有类型检查器帮助的情况下编写纯 javascript 感觉就像走钢丝一样。幸运的是，我们也不必放弃类型检查。

是时候淘汰 npm 了（尽管我们不会发布它提供的任何代码）。

npm init --yesnpm install typescript

您可以在 javascript 代码上使用 typescript 编译器！它有一流的支持。创建jsconfig.json：

{  "compileroptions": {    "strict": true,    "checkjs": true,    "allowjs": true,    "noimplicitany": true,    "lib": ["es2022", "dom"],    "module": "es2022",    "target": "es2022"  },  "include": ["**/*.js"],  "exclude": ["node_modules"]}

现在就跑吧

npm run tsc --watch -p jsconfig.json

并在代码中犯下类型错误。 typescript 编译器应该抱怨：

/** @type {number} **/const num = "hello";

顺便说一下，你上面看到的评论是jsdoc。您可以通过这种方式用类型注释您的 javascript。虽然它比使用 typescript 更冗长一些，但你很快就会习惯它。它也非常强大，只要您不编写疯狂的类型（对于大多数项目来说您不应该这样做），您应该没问题。

如果您确实需要复杂的类型（助手），您可以随时在 .d.ts 文件中添加一些 typescript。

jsdoc 是否只是那些陷入大型 javascript 项目的人们能够逐步迁移到 typescript 的垫脚石？我不这么认为！ typescript 团队还继续向 jsdoc + typescript 添加出色的功能，例如即将发布的 typescript 版本。自动完成在 vs code 中也非常有效。

导入地图

我们学习了如何在没有构建工具的情况下将外部包添加到我们的项目中。然而，如果你将代码分成很多模块，一遍又一遍地写出完整的 url 可能会有点冗长。

我们可以将导入映射添加到我们的index.html的head部分：

<script type="importmap">  {    "imports": {      "superstruct": "https://esm.sh/superstruct@1.0.4"    }  }</script>

现在我们可以简单地使用
导入这个包

import {} from "superstruct"

就像一个“正常”项目。另一个好处是，如果您在本地安装该软件包，类型的完成和识别将按预期工作。

npm install --save-dev superstruct

请注意，您的node_modules目录中的版本将不会被使用。您可以将其删除，您的项目将继续运行。

我喜欢使用的一个技巧是添加：

      "cdn/": "https://esm.sh/",

到我的导入地图。然后，通过 esm.sh 提供的任何项目都可以通过简单地导入来使用。例如：

import peer from "cdn/peerjs";

如果您也想从node_modules中提取类型以进行此类导入的开发，则需要将以下内容添加到jsconfig.json的compileroptions中：

    "paths": {      "cdn/*": ["./node_modules/*", "./node_modules/@types/*"]    },

部署

要部署您的项目，请将所有文件复制到静态文件主机，然后就完成了！如果您曾经参与过旧版 javascript 项目，您就会知道更新不到 1-2 年的构建工具的痛苦。通过此项目设置，您将不会遭受同样的命运。

测试

如果您的 javascript 不依赖于浏览器 api，您可以只使用与 node.js 捆绑在一起的测试运行器。但为什么不编写自己的可以在浏览器中运行的测试运行器呢？

/** @type {[string, () =&gt; promise<void> | void][]} */const tests = [];/** * * @param {string} description * @param {() =&gt; promise<void> | void} testfunc */export async function test(description, testfunc) {  tests.push([description, testfunc]);}export async function runalltests() {  const main = document.queryselector("main");  if (!(main instanceof htmlelement)) throw new error();  main.innerhtml = "";  for (const [description, testfunc] of tests) {    const newspan = document.createelement("p");    try {      await testfunc();      newspan.textcontent = `✅ ${description}`;    } catch (err) {      const errormessage =        err instanceof error &amp;&amp; err.message ? ` - ${err.message}` : "";      newspan.textcontent = `❌ ${description}${errormessage}`;    }    main.appendchild(newspan);  }}/** * @param {any} val */export function assert(val, message = "") {  if (!val) throw new error(message);}</void></void>

现在创建一个文件 example.test.js.

import { test, assert } from "@/test.js";test("1+1", () =&gt; {  assert(1 + 1 === 2);});

还有一个导入所有测试的文件：

import "./example.test.js";console.log("this should only show up when running tests");

在页面加载时运行：

await import("@/test/index.js"); // file that imports all tests(await import("@/test.js")).runAllTests();

您就拥有了完美的 tdd 设置。要仅运行一部分测试，您可以注释掉一些 .test.js 导入，但只有当您积累了大量测试时，测试执行速度才会开始成为问题。

好处

你为什么要这样做？那么，使用较少的抽象层可以使您的项目更易于调试。还有“利用平台”的信条。您学到的技能将更好地转移到其他项目中。另一个优点是，当你在 10 年后回到这样构建的项目时，它仍然可以正常工作，并且你不需要进行考古来尝试恢复已经失效 8 年的构建工具。许多从事遗留项目的 web 开发人员都会熟悉这种经历。

请访问 plainvanillaweb.com 了解更多想法。

文章推荐

无需（构建）工具的 Web 开发

套餐

类型

导入地图

部署

测试

好处

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？