时间戳

首页 > 解决方案 > 从 npm 本地导入 ES 模块依赖项，无需捆绑/转译第一方源

javascript - 从 npm 本地导入 ES 模块依赖项，无需捆绑/转译第一方源

问题描述

背景

我正在尝试创建一个“无构建”JavaScript 应用程序，每次保存任何源文件时，我都不需要watch运行任务来转换 JSX、重新捆绑代码等。

它只适用于第一方代码，但是当我尝试import从 npm 依赖依赖时我被卡住了。

目标

我想实现这种工作流程：

  1. npm install foo（假设它是一个 ES 模块，而不是 CommonJS）
  2. 编辑source/index.js和添加import { bar } from 'foo'
  3. npm run build. 某些东西（webpack、rollup、自定义脚本等）运行，并将foo其捆绑到其中./build/vendor.js（没有来自 的任何东西source/）。
  4. 编辑index.html以添加<script src="build/vendor.js" type="module"...
  5. 我可以source/index.js在我的浏览器中重新加载，并且bar将可用。npm run build直到下次添加/删除依赖项时，我才需要运行。

我已经让 webpack 将依赖项拆分到一个单独的文件中，但是要import在无构建上下文中从该文件中分离出来，我必须import { bar } from './build/vendor.js. 那时 webpack 将不再 bundle bar，因为它不是相对导入。

我也尝试过Snowpack，它在概念上更接近我想要的，但我仍然无法配置它来实现上述工作流程。

我可以编写一个简单的脚本来将文件从 复制node_modules到build/，但我想使用捆绑软件来进行摇树等操作。不过，很难找到支持这种工作流程的东西。

标签： javascriptwebpackes6-modulesbundling-and-minificationsnowpack

解决方案

我想出了如何做到这一点，使用 Import Maps 和 Snowpack。

高层解释

我使用Import Maps将裸模块说明符import { v4 } from 'uuid'转换为 URL。它们目前只是一个起草的标准，但在 Chrome 中支持在实验标志后面，并且有一个 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。以下是相关行的直接链接：

推荐阅读