將 Webpack UMD 轉換為原生 ES 模塊

Question

我正在嘗試嚴格使用原生 ES 模塊而不轉譯我自己的代碼，但經常我會找到一個第三方庫，它與 Webpack 和 babel 一起打包為 UMD，這似乎是當今最常見的格式。

這不太好導入

import { mat4 } from 'https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix.js'

結果在

語法錯誤：請求的模塊不提供名為“mat4”的導出

我不認為 UMD 真的應該被稱為通用的。

當然我可以直接導入 src 但是我必須接受他們可能擁有的任何 babel 配置。 我試圖避免轉譯我的任何代碼，我只想轉譯所有 UMD node_modules以在我的代碼中使用。

我想從 UMD 轉換為 ES。 這樣我就可以相信圖書館已經轉譯了任何非標准的東西，我可以像往常一樣導入它。 我在網上搜索過，但沒有找到任何東西。 我嘗試了 commonjs 到 es modules 插件，但它沒有用，因為導出聲明不在頂層。

有誰知道是否有一個插件可以做到這一點，或者任何人都可以提供一些關於他們如何處理這種情況的想法？

Answer 1

在編寫 ESM 代碼時與第三方庫打交道 2 年之后，我認為snowpack.dev 上的人們有一個非常好的解決方案。

因此，我將把它作為其他遇到此問題的人的答案。