创建一个包含一些组件的 Javascript 包以供重用
Posted
技术标签:
【中文标题】创建一个包含一些组件的 Javascript 包以供重用【英文标题】：Creating a Javascript bundle with a few components for reuse 【发布时间】：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>
【参考方案1】：
既然你提到你不想“一路走 SPA”，一个合理的混合是在 MPA（多页应用程序）模式下使用 Vue。这将需要使用 vue-cli/webpack 配置将您的 Vue 组件编译成包，但是一旦您有了这个构建管道，这些包就可以通过django-webpack-loader 在单独的 Django 模板中使用。信息可以通过模板变量直接作为 Vue 组件属性从 Django 传递。
重新捆绑，是的，您可以使用这种方法将所有这些资源捆绑到一个 JS 中，但是创建一个或多个表示共享逻辑（第三方库、独立组件）的通用捆绑包几乎同样容易（而且性能要高得多） ，甚至 Vue 本身），然后根据需要在各个 Django 模板上从这些包中进行选择。
实现的步骤有点过于繁琐，无法直接在这里发帖，但我写了一系列文章Django + Vue -- Best of Both Frontends 来解释。还有一个cookiecutter 用于使用这种方法提升新项目。我知道您已经有一个网站，但您也许可以调整那里的实现。
很好的黑客攻击！
【讨论】：
这听起来不错。我会看你的文章。谢谢！以上是关于创建一个包含一些组件的 Javascript 包以供重用的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 sbt-assembly 和 sbt-native-packager 构建 deb 包以包含单个程序集 jar？
如何将 xaml 模板打包成 nuget 包以供其他开发人员重用？
帮我创建一个 Firefox 扩展（Javascript XPCOM 组件）