从 npm 本地导入 ES 模块依赖项，无需捆绑/转译第一方源背景目标高级解释实现 - 最小示例实现 - 完整示例

如何解决从 npm 本地导入 ES 模块依赖项，无需捆绑/转译第一方源背景目标高级解释实现 - 最小示例实现 - 完整示例

背景

我正在尝试创建一个“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.js
snowpack.deps.json
package.json
core.php 输出垫片
plugin.php - 输出导入地图
passphrase-generator.js - 导入模块。 （在此示例中已将它们注释掉，出于本答案范围之外的原因，只需取消注释它们，运行 bundle 脚本，它们就会起作用）。

从 npm 本地导入 ES 模块依赖项，无需捆绑/转译第一方源 背景目标高级解释实现 - 最小示例实现 - 完整示例

如何解决从 npm 本地导入 ES 模块依赖项，无需捆绑/转译第一方源 背景目标高级解释实现 - 最小示例实现 - 完整示例

背景

目标