问题描述
背景
我正在尝试创建一个“buildless”JavaScript 应用程序，在该应用程序中，我不需要在每次保存任何内容时运行 watch 任务来转译 JSX、重新捆绑代码等源文件。
仅使用第一方代码就可以正常工作，但是当我尝试从 npm 中 import 依赖项时我卡住了。
目标
我想实现这种工作流程：
-
npm install foo（假设它是一个 ES 模块，而不是 CommonJS） - 编辑
source/index.js并添加import { bar } from 'foo' -
npm run build。某些东西（webpack、rollup、自定义脚本等等）运行，并将foo及其依赖项捆绑到./build/vendor.js中（没有来自source/的任何东西）。 - 编辑
index.html以添加<script src="build/vendor.js" type="module"... - 我可以在浏览器中重新加载
source/index.js，bar将可用。在下一次添加/删除依赖项之前，我不必运行npm run build。
我已经让 webpack 将依赖项拆分为一个单独的文件，但是要在无构建上下文中从该文件中import，我必须import { bar } from './build/vendor.js。那时 webpack 将不再捆绑 bar，因为它不是相对导入。
我也尝试过 Snowpack，它在概念上更接近我想要的，但我仍然无法对其进行配置以实现上述工作流程。
我可以编写一个简单的脚本来将文件从 node_modules 复制到 build/，但我想使用捆绑包来实现摇树等。很难找到一些东西不过支持这个工作流程。
解决方法
我想出了如何做到这一点，使用导入地图和 Snowpack。
高级解释
我使用 Import Maps 将诸如 import { v4 } from 'uuid' 之类的裸模块说明符转换为 URL。它们是 currently just a drafted standard，但在 Chrome 中受实验性标志支持，并且具有 a shim。
这样，您就可以在代码中使用裸 import 语句，以便打包器理解它们并且可以正常工作，进行摇树等。但是，当浏览器解析导入时，它会将其视为 import { v4 } from 'http://example.org/vendor/uuid.js'，并像普通 ES 模块一样下载。
设置好后，您可以使用任何捆绑程序来安装软件包，但需要对其进行配置以构建单独的软件包，而不是将所有软件包合并为一个。 Snowpack 在这方面做得非常好，因为它是为非捆绑式开发工作流而设计的。它在底层使用 esbuild，比 Webpack 快 10 倍，因为它避免了不必要地重新构建没有改变的包。它仍然会进行摇树等操作。
实现 - 最小示例
index.html
<!doctype html>
<!-- either use "defer" or load this polyfill after the scripts below-->
<script defer src="es-module-shims.js"></script>
<script type="importmap-shim">
{
"imports": {
"uuid": "https://example.org/build/uuid.js"
}
}
</script>
<script type="module-shim">
import { v4 } from "uuid";
console.log(v4);
</script>
snowpack.config.js
module.exports = {
packageOptions: {
source: 'remote',},};
packageOptions.source = remote 告诉 Snowpack 自己处理依赖项，而不是期望 npm 去做。
运行 npx snowpack add {module slug - e.g.,'uuid'} 在 snowpack.deps.json 文件中注册依赖项，并将其安装在 build 文件夹中。
package.json
"scripts": {
"build": "snowpack build"
}
每当您添加/删除/更新依赖项时调用此脚本。不需要 watch 脚本。
实现 - 完整示例
查看iandunn/no-build-tools-no-problems/f1bb3052。以下是相关行的直接链接：
snowpack.config.jssnowpack.deps.jsonpackage.json-
core.php输出垫片 -
plugin.php- 输出导入地图 -
passphrase-generator.js- 导入模块。 （在此示例中已将它们注释掉，出于本答案范围之外的原因，只需取消注释它们，运行bundle脚本，它们就会起作用）。
设置时间 控制面板
错误1：Request method ‘DELETE‘ not supported 错误还原：...