Rails Webpacker 还是 Vue-CLI？

Posted 2023-02-22

【中文标题】Rails Webpacker 还是 Vue-CLI？

【英文标题】：Rails Webpacker or Vue-CLI?

【发布时间】：2018-06-05 05:53:17

【问题描述】：

我正在构建一个单页 (Web) 应用程序。我对 Rails v5.0 非常着迷，尤其是它的内置 API 功能。

过去我使用Vue.js 构建javascript 前端，通常使用Vue-CLI project 提供的模板。这允许基本上在任何地方部署Vue component-based 静态站点。太好了。

现在，Rails 5.1 有一些内置的 Webpack 和 Yarn 功能，看起来也很吸引人。我不确定如何继续我的新申请。

我的问题：

使用 Rails v5.1 中提供的 Webpacker 扩展将 Webpack 和 Vue 集成到 Rails 本身有哪些优点/缺点？一世 打算部署到 Heroku。 另一方面，后端使用 Rails API-only 模式和维护基于 Vue/Webpack 的优缺点是什么？ 前端在自己的目录中？我会保持一切不变 存储库，通过 Heroku 部署后端，通过 像 Netlify 这样的静态主机。 哪种方法会产生更多的认知开销或技术复杂性？

在过去的几天里，我一直在四处寻找，但我在网上没有找到太多关于此的简明信息。人们似乎对 Rails 开发环境的自动重新加载功能感兴趣，但我已经通过 Vue-CLI 免费获得了这些功能。

据我所知，将它们分开的原因如下：

前端的部署在任何地方都非常简单。 Rails 的 Webpacker 模式非常新，目前还没有很多教程或指南，尤其是关于集成测试。保持 事情分开意味着我现有的测试设备仍然应该 申请。

以下是将这两个部分整合在一起的一些优点：

将来可能会为前端和服务器生成的页面使用静态资产，如果那样的话 必要的。 支持“Rails 方式”，并暗示 Rails 团队在未来进行维护。 JS 前端不需要单独托管。 无需担心 CORS (?)

这两种方法还有哪些具体的好处？

【问题讨论】：

如果是单独的前端，你不需要单独保留js前端，因为你可以编译它并保存在公共Rails文件夹中。我已经为 angular + Rails 做过这个，例如：github.com/alexkojin/advicy。前端代码在 deploy.rb 脚本中生成。

@AlexKojin 是的，我在考虑这个问题：一种中间立场。 Vue-CLI 编译到 dist 文件夹，但您当然可以将 Webpack 指向 Rails public 文件夹。我没有考虑这个问题，因为我担心它会使水变得浑浊。谢谢

【参考方案1】：

当我开始时，我采用了 webpacker 的方式，不知何故，因为这就是它看起来“应该”的样子。正如您所说，很少有指导。 Webpacker（依赖于 latest 节点）似乎是一个移动的目标，使部署甚至开发变得更加复杂。为了什么好处，我问并摆脱了它。

现在我使用 vue from the cdn。好处：

缓存在用户附近 几乎零安装 易于拥有开发/生产版本

我将应用程序代码写入 Rails 模板。使用haml，实际上是ruby2js，但你可以使用javascript就好了。我就是这样开始的，但是我喜欢 ruby​​，而且 ruby​​ 代码几乎是生成的 js 的一半大小，但我走偏了。

所以模板是你的“vue 注释”rails 模板。 小代码也进入 rails 模板。 可以在资产中定义更多代码并从应用程序中引用。 甚至组件也可以使用 x-template 语法写入模板。

最后但同样重要的是：数据可以通过 to_json 直接传输到模板中。并且在同一个渲染中。比附加查询快得多。当 to_json 不够时，可以使用 rabl 来准确获取所需的内容。

我希望我说清楚了。我正在编写一些 vue-rails 的东西，因为几乎找不到。注意here（我会在帖子准备好后发表评论）