javascript - 如何使用 "npm install "来开发供浏览器使用的页面？

Question

当向在浏览器中运行的页面添加资源时，我要么链接到文件(在本地，由网络服务器提供，要么在 CDN 上)

<link rel="stylesheet" href="https://somecdn.com/mycssresource.min.css">
<script src="alocalscript.js"></script>

或使用最终捆绑 npm 的 webpack安装模块合二为一bundle.js ，由我的网络服务器提供服务。

在阅读框架文档时，我经常看到(最近在 Bulma 中)推荐的框架安装方式为

npm install <framework>

我了解 Node.js 程序的用法(所有内容都在服务器本地运行，因此框架的源代码在那里占有一席之地)但对于基于浏览器的开发，由 npm install 安装的文件位于node_modules最终必须进入代码实际运行的浏览器。

是推荐(或首选)通过npm install安装框架吗？适用于用于浏览器的代码，还是仅适用于 Node.js 或 webpack(或类似的 bundler )使用？

Answer 1

我个人更喜欢通过 npm install 安装，然后使用像 /node_modules/.../filename.css 这样的相对 URL。

我也知道有些人更喜欢复制包的 css/js 并从他们自己的目录提供它们，例如 /assets/css/... 或 /assets/js/..。这样他们就可以根据需要编辑/添加到原始框架并保留更改，因为他们在 git 中提交了更改。

另一个非常流行的选项是 CDN，许多人建议使用缓存以获得缓存的巨大优势，特别是如果用户已经下载了该文件，因为它被用于他们访问的另一个网站，他们会更快地加载您的应用程序/网站，因为他们将这些文件缓存在浏览器本地，无需重新下载。