從 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.