托管 jQuery 插件与 npm 包，有啥区别？

Posted 2023-03-08

【中文标题】托管 jQuery 插件与 npm 包，有啥区别？

【英文标题】：Hosted jQuery plugin vs npm package, what's the difference?托管 jQuery 插件与 npm 包，有什么区别？

【发布时间】：2017-02-12 17:34:24

【问题描述】：

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

现在使用 npm 包，您通常会使用 npm install package_name 和 import xx from 'package-name'。而且还有 webpack 发挥作用，这只会让事情变得更加混乱。我知道在使用 webpack 时，您不应该将 3rd 方 jquery 插件捆绑到最终的 bundle.js 输出中。是不是说部署的时候推荐使用托管的css/js文件来解析依赖？

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

【参考方案1】：

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

您可以使用其他模式来包含模块，例如 amd 模式和 common.js 模式（与导入非常相似）。

【参考方案2】：

我认为不同的是，Web开发的新趋势有新的需求，例如资源的延迟加载，所以现在，在html中包含脚本的旧方式已经没有用了，因为这不符合要求