创建一个包含一些组件的 Javascript 包以供重用答案

【问题标题】：Creating a Javascript bundle with a few components for reuse创建一个包含一些组件的 Javascript 包以供重用
【发布时间】：2021-01-01 21:23:36
【问题描述】：

我有一个后端渲染页面（如果它重要的话是 django），我想使用 PrimeVue 中的一些组件和一个打包为 vue 组件的 markdown 编辑器来做一些改进。现在，我们有一些使用 jquery 的小动画，我们将来自 CDN 的 jquery 直接包含到我们的页面中。几个月前，我们需要使用更多的客户端交互来为页面增添趣味，我们通过 CDN 将 vue.js 包含到该页面（删除 jquery），然后在 index.js 中编写了一些 JavaScript，我们也从中加载一个 CDN 并完成了我们的工作。这是目前的情况。页面当前看起来像这样

<html>
  ....
 <script src="https://cdn/vue.js"></script>
 <script src="/static/index.js"></script>

div #mainvue 是 vue 运行并执行所需操作的地方。

这就是我们现在的位置。

使用普通的 vue 是可以的。现在，我想加入一些来自 primevue 的组件以及包装为 vue 组件的第 3 方 Markdown 编辑器。我想将所有这些以及普通的 vue 本身捆绑到一个 javascript 包中，我可以将它放到 CDN 上并包含到我的所有页面中。然后我的开发人员可以在index.js 中完成他们的日常工作。

这是一种合理的方法吗？如果是，我该怎么做？我不熟悉 javascript 生态系统。如果没有，解决这个问题的正确方法是什么。我不想一路走 SPA 和 REST API。我只想在一个简单的后端渲染页面上使用一些 3rd 方组件和 vue。

【问题讨论】：

你使用的是 Webpack 还是纯 JS？
我没有“使用”webpack，因为我不知道如何使用。我已经将它与我标记问题的其他几个工具一起尝试过，但它们都没有让我到任何地方。我的想法是，如果我 npm install 我需要的所有组件然后运行 webpack，我应该得到一个捆绑包，但显然，这并不是那么简单。
你试过使用 vue cli 了吗？ cli.vuejs.org/guide/build-targets.html#library 实际上是 webpack，但配置较少。
我做到了，但我不确定如何使用它。就像我说的，我不熟悉生态系统，所以我不知道该怎么做。我无法找到完全符合我提出的问题的教程，而这正是我在这里寻找的。span>

标签： javascript vue.js npm webpack yarnpkg

【解决方案1】：

既然你提到你不想“一路走 SPA”，一个合理的混合是在 MPA（多页应用程序）模式下使用 Vue。这将需要使用 vue-cli/webpack 配置将您的 Vue 组件编译成包，但是一旦您有了这个构建管道，这些包就可以通过django-webpack-loader 在单独的 Django 模板中使用。信息可以通过模板变量直接作为 Vue 组件属性从 Django 传递。

重新捆绑，是的，您可以使用这种方法将所有这些资源捆绑到一个 JS 中，但是创建一个或多个表示共享逻辑（第三方库、独立组件）的通用捆绑包几乎同样容易（而且性能要高得多），甚至 Vue 本身），然后根据需要在各个 Django 模板上从这些包中进行选择。

实现的步骤有点过于繁琐，无法直接在这里发帖，但我写了一系列文章Django + Vue -- Best of Both Frontends 来解释。还有一个cookiecutter 用于使用这种方法提升新项目。我知道您已经有一个网站，但您也许可以调整那里的实现。

很好的黑客攻击！

【讨论】：

这听起来不错。我会看你的文章。谢谢！