从 npm 本地导入 ES 模块依赖，无需捆绑/转译第一方源
[英]Natively import ES module dependencies from npm without bundling/transpiling first-party source
问题描述
背景
我正在尝试创建一个“无构建”的JavaScript应用程序，每次我保存任何源文件时，我都不需要运行watch任务来转换 JSX、重新捆绑代码等。
它仅适用于第一方代码，但当我尝试从 npm import依赖项时，我被卡住了。
目标
我想实现这种工作流程：
-
npm install foo（假设它是一个 ES 模块，而不是 CommonJS） - 编辑
source/index.js并添加import { bar } from 'foo' -
npm run build。 某些东西（webpack、汇总、自定义脚本等）运行，并将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/ ，但我想使用 bundled 来进行 tree shaking 等。但是很难找到支持这个工作流程的东西。
2 个解决方案
解决方案1
3 已采纳 2021-02-03 20:10:36
我想出了如何做到这一点，使用 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 - eg, '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- 输出导入 map -
passphrase-generator.js- 导入模块。 （他们在这个例子中被注释掉了，由于这个答案的 scope 之外的原因，只需取消注释它们，运行bundle脚本，它们就会工作）。
解决方案2
1 2021-10-05 00:01:21
如果您愿意使用在线服务，Skypack CDN 似乎很适合。 例如，我想使用 sample-player NPM 模块，并且我选择在我的项目中使用 bundle-less 工作流程，仅使用 ES6 模块，因为我的目标是嵌入式 Chromium 最新版本，因此无需担心遗留浏览器支持，所以我需要做的就是：
import SamplePlayer from "https://cdn.skypack.dev/sample-player@^0.5.5";
// init() once the page has finished loading.
window.onload = init;
function init() {
console.log('hello sampler', SamplePlayer)
}
在我的 html 中：
<script src="./src/sampler/sampler.js" type="module"></script>
当然你也可以在上面的url查看CDN生成的JS文件，下载它指向的生成的一体化js文件，需要时也可以离线使用。
NPM：依赖于本地 ES6 模块（无转译）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.