使用 VueJS、VuelidateJS 和 NodeJS/Express 时的项目结构

Question

我的 Web 开发主要是使用 NodeJS 的嵌入式设备的 Intranet 站点和 Web 前端。

我目前的结构是将所有东西都放在一个 NPM 包中。我在 Nginx 后面运行 NodeJS，让 Nginx 直接从 public 提供 css/image/client-side-javascript 文件。

我开始使用 VueJS 和 Vuelidate，它们都使用现在的 ES6 模块系统 - 例如。 import { required, minLength } from 'vuelidate/lib/validators'.

虽然我已经（相当笨拙地）使这些工作与我当前的结构一起工作，但我认为是时候进入 Javascript 构建系统/捆绑程序的世界了。

如果我使用 VueJS 的首选 WebPack 选项，我应该如何更改我的代码结构？

• 我应该有一个 NPM 包用于前端（由 vue-cli init 生成），另一个用于 Express 后端应用程序吗？

• 我应该将我的 Express App 放入生成的 Vue 前端包中吗？

• 我是否应该使用 browserify 来完成 WebPack 的工作并保留我现有的结构？

• 或者完全是别的什么？

Answer 1

我不确定您为什么打算将您的 JavaScript 代码放在其他包中。如果您有一个应用程序，那么您可以将原始 JavaScript 文件与构建脚本一起保存在其中。应该有人能够检查您的应用程序并能够构建它。

如果您希望开始使用构建系统，那么一个不错的“桥梁”可能是使用 Mix，这是 Laravel 创建的一个项目，用于构建 Sass 和 JavaScript 等前端资产。它在底层使用了 Webpack，但反过来又公开了一个对用户更友好、更流畅的 API。

如果你走这条路，那么你可以把你的原始 JavaScript 文件放在 lib/ 或 src/ 目录中。然后你可以像这样使用 Mix 来编译这些组件：

mix.js('lib/your-entry-point-script.js', 'public/js/app.js');

您的入口点脚本将只是 requires 所有其他脚本和组件以及您想要“构建”的脚本的脚本。然后 Mix 会编译它并将生成的脚本放在 public/js/app.js。

Mix 本身只是一个 npm 包，所以你只需要npm install laravel-mix --save-dev。

您可以在https://laravel.com/docs/5.7/mix阅读有关 Mix 的更多信息