在瀏覽器上提供npm模塊的javascript源的正確方法是什么？

Question

安裝npm和nodejs后，可以通過運行輕松使用模塊

npm安裝模塊

然后使用js require（）函數。 我假設存儲在計算機上某個地方的源代碼將被加載。 但是，如果我想在客戶端的瀏覽器中使用此模塊的javascript函數怎么辦？ 經過一些工作，我可能最終可以在磁盤或Web上找到一些文件，並在其中找到所需的源代碼。 我的問題是：是否有一個標准流程來收集給定模塊的所有依賴關系，因此我可以在客戶網站上提供這些服務？ 還是我完全想念某些事情，而事情卻以完全不同的方式進行？

Answer 1

如果該庫是作為標准javascript模塊發布的，則可以將其直接加載到瀏覽器中，如以下示例所示：

<script type="module">
  import { html, render } from '/node_modules/lit-html/lit-html.js';
  render(html`<span>Hello, world</span>, document.body)
</script>

unpkg服務提供了一個有用的工具，可以自動將模塊說明符轉換為絕對URL，您只需添加?module查詢字符串即可：

import { html, render } from 'https://unpkg.com/lit-html/lit-html.js?module';

但是，如果（不幸的是通常）情況是該庫以CJS模塊發布，則需要使用模塊捆綁器。 我偏愛匯總 。 要在包中匯總 cjs模塊，請確保安裝並使用rollup-plugin-commonjs插件。

Answer 2

有多種工具可用於將依賴項合並到一個文件中，以供Web瀏覽器使用。 此類工具通常稱為“捆綁器”。

一些受歡迎的例子包括：

• 的WebPack
• Browserify
• 包

_{該列表並不意味着要全面，甚至不建議使用哪種工具。}