Структура проекта при использовании VueJS, VuelidateJS с NodeJS / Express - PullRequest
Новая
       9

Структура проекта при использовании VueJS, VuelidateJS с NodeJS / Express

0 голосов
/ 02 ноября 2018

Моя веб-разработка - это в основном сайты интрасети и веб-интерфейсы для встроенных устройств, использующих NodeJS.

Моя текущая структура - все в одном пакете NPM. Я запускаю NodeJS за Nginx и позволяю Nginx обслуживать файлы css / image / client-side-javascript непосредственно из public.

Я начинаю использовать VueJS и Vuelidate, оба из которых используют систему модулей ES6 - например, import { required, minLength } from 'vuelidate/lib/validators'.

Хотя я (довольно хакерски) сделал эту работу с моей нынешней структурой, я думаю, что пришло время войти в мир сборочных систем / сборщиков Javascript.

Если я использую предпочитаемый VueJS вариант WebPack, как мне изменить структуру моего кода?

  • Должен ли я иметь один пакет NPM для внешнего интерфейса (сгенерированный vue-cli init), а другой - для внутреннего приложения Express?

  • Должен ли я поместить свое приложение Express в созданный пакет внешнего интерфейса Vue?

  • Должен ли я использовать browserify, чтобы выполнить работу WebPack и остаться с моей существующей структурой?

  • Или что-то совсем другое?

1 Ответ

0 голосов
/ 02 ноября 2018

Я не уверен, почему вы намереваетесь поместить свой код 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 .

Сам микс - это просто пакет npm, так что все, что вам нужно сделать, это npm install laravel-mix --save-dev.

Вы можете узнать больше о Mix на https://laravel.com/docs/5.7/mix

...