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

Question

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

我目前的结构是将所有内容都放在一个 NPM 包中。我 运行 Nginx 后面的 NodeJS，让 Nginx 直接从 public.

服务 css/image/client-side-javascript 文件

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

虽然我（相当笨拙地）用我目前的结构完成了这些工作，但我认为是时候进入 Javascript build-systems/bundlers.

的世界了

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

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

• 是否应该将我的 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');

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

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

您可以在 https://laravel.com/docs/5.7/mix

阅读更多关于 Mix 的信息