在浏览器上提供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
• 包

_{该列表并不意味着要全面，甚至不建议使用哪种工具。}