Структура проекта при использовании VueJS, VuelidateJS с NodeJS / Express
Моя веб-разработка - это в основном сайты интрасети и веб-интерфейсы для встраиваемых устройств с использованием NodeJS.
Моя текущая структура - все в одном пакете NPM. Я запускаю NodeJS за Nginx и позволяю Nginx обслуживать файлы javascript css / image / на стороне клиента непосредственно с public.
Я начинаю использовать VueJS и Vuelidate, оба из которых используют теперь систему модулей ES6 - например, import { required, minLength } from 'vuelidate/lib/validators'.
Хотя я (довольно хакерски) заставил это работать с моей текущей структурой, я думаю, что пришло время окунуться в мир сборочных систем / сборщиков Javascript.
Если я использую предпочтительный вариант WebPack для VueJS, как мне изменить структуру кода?
Должен ли я иметь один пакет NPM для внешнего интерфейса (сгенерированный
vue-cli init), а другой - для серверного приложения Express?Должен ли я поместить свое приложение Express в сгенерированный пакет внешнего интерфейса Vue?
Должен ли я использовать
browserifyдля выполнения работы WebPack и оставаться с моей существующей структурой?Или что-то совсем другое?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 скомпилирует это и поместит результирующий скрипт в общедоступный / js / app.js.
Сам Mix - это просто пакет npm, поэтому все, что вам нужно сделать, это npm install laravel-mix --save-dev.
Вы можете узнать больше о Mix на https://laravel.com/docs/5.7/mix
@fadedbee Итак…? Я бы создал отдельные клиентские и серверные пакеты только в том случае, если бы вы действительно собирались использовать их в нескольких отдельных приложениях. Если это одно и то же приложение, но интерфейс и серверная часть, просто храните код в одном репозитории.
В этой статье создаются два пакета NPM: «клиентский» и «серверный». medium.com/@anaida07/mevn-stack-application-part-1-3a27b61dc ae0