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

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

我目前的结构是把所有东西都放在一个NPM包中。我在Nginx后面运行NodeJS，让Nginx直接从

public

提供css/image/client-side javascript文件

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

虽然我已经（相当粗鲁地）用我当前的结构实现了这些功能，但我认为是时候进入Javascript构建系统/捆绑包的世界了

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

• 我是否应该为前端（由vue cli init生成）提供一个NPM包，为Express后端应用程序提供另一个NPM包

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

• 我是否应该使用

  browserify

  来完成WebPack的工作并保持现有结构

• 或者完全是别的什么

---

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

如果您希望开始构建系统，那么一个很好的“桥梁”可能是使用Mix，这是一个由Laravel创建的用于构建前端资产（如Sass和JavaScript）的项目。它在引擎盖下使用Webpack，但反过来又暴露出一个更为用户友好、流畅的API

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

mix.js（'lib/your entry point script.js'，'public/js/app.js'）；

您的入口点脚本将只是

需要的脚本

s您的所有其他脚本和组件以及您想要“构建”的脚本。Mix随后将编译该脚本并将结果脚本放在public/js/app.js上

Mix本身只是一个npm包，所以您需要做的就是

npm安装laravel Mix--save dev

---

您可以在

上阅读有关Mix的更多信息。本文提供了两个NPM包，“客户端”和“服务器”@fadedbee那么…？如果您要在多个独立的应用程序中使用不同的客户端和服务器包，我只会创建不同的客户端和服务器包。如果它只是同一个应用程序，但有前端和后端，只需将代码保存在同一个存储库中即可。