直接引用node_modules可以吗？

Question

我目前正在处理的项目 (Java/JSP) 目前不使用包管理器来管理其 JavaScript 依赖项。

使用的库只是在版本控制下提交，并从 JSP 页面中引用...

如果我们使用包管理器（例如yarn），我想演变成一个工作流程，然后最终还使用webpack 来进一步优化构建。

我想分阶段进行。由于我对这样的前端工作流程几乎没有经验，所以我有一些问题：

1. 刚开始在package.json 文件中定义使用的库，然后使用yarn 进行打包，会不会很奇怪？

yarn 然后将获取模块并将它们存储在node_modules 文件夹中。

1. 直接从 JSP 文件中引用 node_modules 文件夹中的脚本是不好的做法吗？

示例

package.json：

"dependencies": {
    "jquery": "^3.4.1"
}

app.jsp：

<script src="node_modules/jquery/dist/jquery.min.js"></script>

Answer 1

NPM 包旨在与 Node 一起运行，而不是在浏览器中运行。你需要提供一个浏览器友好的版本，使用 webpack 或 browserify 之类的东西。

Answer 2

1. 是的，完全没问题。这是我们通常初始化前端项目的方式（可能有时，一些更高级别的脚本会为我们这样做，但仍然如此）。只需运行npm init。

2. 哦，是的，这很糟糕。最有可能的是，它根本行不通。如果你想直接在页面上加载一些东西，你需要一个 cdn 版本。

说实话，如果没有像 webpack、gulp 或 grunt 这样的构建工具，拥有 package.json 并没有多大用处。

UPD： 关于为什么直接从node_modules 加载东西可能会受到伤害：

许多现代 JS 包（例如 React）使用尚未在任何浏览器中实现的 modules 或仅由某些浏览器支持的 ES5+ 语法。

这样，您可以直接加载 React，但它会在任何带有 import is not defined 之类的浏览器中崩溃。

基本上，很多现代软件包都希望您拥有构建工具或使用 cdn 版本。

老实说，我不知道有多少包可以让你直接从node_modules 无缝加载东西。

因此，在您的特定情况下，如果您使用的特定软件包允许您这样做并且附带浏览器兼容版本，那么您可以继续这样做。

尽管如此，我认为你迟早会遇到一个不会让你以这种方式包含它的包（或更糟：它会，但会导致一些不支持最新 JS 功能的浏览器崩溃/在您的应用中引入其他令人讨厌的错误）。

希望在这个阶段，您已经配置了构建工具。

奖励： 相对最近一些浏览器开始support modules！

甚至还有像 snowpack 这样的工具，它们的功能与您正在寻找的东西特别相似。

尽管如此，您仍然需要非常小心这一点。例如，直接包含 lodash.js 将生成 640 个 GET（查看 this article ->“库”部分）。