- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
背景
我正在尝试创建一个“buildless”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
直到下一次我添加/删除依赖项。 import
在无构建上下文中从该文件中,我必须
import { bar } from './build/vendor.js
.届时 webpack 将不再捆绑
bar
,因为它不是相对导入。
node_modules
复制文件至
build/
,但我想使用捆绑软件来实现摇树等功能。不过,很难找到支持这种工作流程的东西。
最佳答案
我想出了如何做到这一点,使用 Import Maps 和 Snowpack。
高层解释
我用了Import Maps翻译裸模块说明符,如 import { v4 } from 'uuid'
进入网址。他们是 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
脚本,它们就会工作)。 关于javascript - 从 npm 本地导入 ES 模块依赖项,无需捆绑/转译第一方源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65982326/
我是一名优秀的程序员,十分优秀!