jquery - 托管 jQuery 插件与 npm 包，有什么区别？

Question

这里是新手前端开发人员。在过去，要包含第 3 方 jquery 插件，通常的方法是包含 <script> HMTL 中的标签，通常引用一些托管的 js/css 文件。

现在使用 npm 包，您通常会这样做 npm install package_name和import xx from 'package-name' 。而且还有 webpack 发挥作用，这只会让事情变得更加困惑。我知道在使用 webpack 时，您不应该将第 3 方 jquery 插件捆绑到最终的 bundle.js 输出中。这是否意味着部署时建议使用托管的css/js文件来解决依赖关系？

这两种方法有什么区别？一个用于开发，另一个用于部署？

Answer 1

导入第 3 方模块(不仅如此)它有助于编写更多模块化代码，并有助于将代码拆分为多个文件。此模式的优点是您不必通过在 html 脚本上显式定义依赖项来手动解决依赖项。当项目不断增长时，很可能会失去对所有这些文件的控制，弄乱包含它们的顺序，并最终破坏所有内容。在导入的情况下，您可以在功能中定义依赖项，并且不依赖于 html 文档中包含文件的顺序。迄今为止，所有浏览器甚至 Node 均不支持导入。所以，这就是 Babel 和 webpack 发挥作用的时候了。当你开发时，导入应该被翻译成浏览器和 Node 可以理解的东西，你可以使用 babel 来实现这一点(从未使用过 Webpack，但你可能可以做同样的事情)。 Babel 和 Webpack 将确保依赖关系得到解决，并最终生成另一个 js 文件，该文件将被编译为浏览器和 Node 可以理解的纯 JavaScript。 Webpack 和 babel 应该同时用于开发和部署。

还有其他模式可用于包含模块，例如 amd 模式和 common.js 模式(它与导入非常相似)。