Ian*_*unn 7 javascript bundling-and-minification webpack es6-modules snowpack
我正在尝试创建一个“无构建”JavaScript 应用程序，在该应用程序中，每次保存任何源文件时，我都不需要watch运行任务来转译 JSX、重新捆绑代码等。
它仅适用于第一方代码，但当我尝试import从 npm 获取依赖项时，我陷入了困境。
我想实现这样的工作流程：
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_modulesto复制build/，但我想使用捆绑包来进行树摇动等。不过，很难找到支持此工作流程的东西。
我想出了如何使用导入地图和 Snowpack 来做到这一点。
我使用Import Maps将裸模块说明符转换import { v4 } from 'uuid'为 URL。它们目前只是一个起草的标准，但在 Chrome 中得到了实验性标志的支持，并且有一个垫片。
这样，您就可以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.jsoncore.php输出垫片plugin.php- 输出导入映射passphrase-generator.js- 导入模块。 （在本示例中，它们被注释掉，原因超出了本答案的范围，只需取消注释它们，运行脚本bundle，它们就会起作用）。| 归档时间： |
|
| 查看次数： |
1591 次 |
| 最近记录： |