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

Question

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

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

我开始使用 VueJS 和 Vuelidate，它们都使用现在的 ES6 模块系统 - 例如从“vuelidate/lib/validators”导入 { required, minLength }。

虽然我已经(相当粗俗地)用我当前的结构完成了这些工作，但我认为现在是进入 Javascript 构建系统/捆绑程序世界的时候了。

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

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

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

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

• 或者完全是别的东西？

Answer 1

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

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

如果您沿着这条路线走下去，那么您可以将原始 JavaScript 文件放在 lib/ 或 src/ 目录中。然后，您可以使用 Mix 来编译这些组件，如下所示:

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

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

Mix 本身只是一个 npm 包，因此您需要做的就是 npm install laravel-mix --save-dev。

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