Разница между двумя функциями обещания в javascript - PullRequest
Новая
       66

Разница между двумя функциями обещания в javascript

1 голос
/ 11 марта 2020

Таким образом, с помощью Vue и Nuxt для ленивого импорта маршрута вы можете сделать 

() => import('~/layouts/Container.vue').then(m => m.default || m)

Но я не хочу вводить .then(m => m.default || m) каждый раз, когда добавляю маршрут. Поэтому я создал функцию, которая будет делать это, под названием routeImport. Импорт маршрута действительно прост. Это выглядит так: 

const routeImport = file => import(file).then(m => m.default || m)

Так что теперь я могу добавить свой маршрут как 

() => routeImport('~/layouts/Container.vue')

Но это не дает тот же результат. Первая функция возвращает компонент, а другая выдает ошибку: 

Error: Cannot find module '~/layouts/Container.vue'

Кто-нибудь знает, как я могу заменить эту функцию?

1 Ответ

3 голосов
/ 11 марта 2020

Похоже, проблема в том, что вы используете полностью динамическую c переменную в качестве строки запроса для вашей import() функции, которую веб-пакет не может статически анализировать , поэтому он не включает желаемый модуль в вашем комплекте.

Возможно, вы захотите дать вебпаку подсказку о том, что вы загружаете. Например: 

const layoutImport = layout => import(`~/layouts/${layout}.vue`).then(m => m.default || m)

Или: 

const routeImport = file =>
  import(
    /* webpackInclude: /layouts/(Container|OtherView|Etc).vue$/ */
    file
  ).then(m => m.default || m)

Это заставит веб-пакет включить все макеты в ваш пакет (или указанные c макеты, включенные в ваше регулярное выражение), но все же разрешить Вы динамически импортируете их. Обратите внимание, что import() рассматривается как точка разделения, поэтому, хотя файлы включены в ваш пакет, они обычно будут сгруппированы в отдельный «чанк».

Вы можете управлять некоторыми аспектами чанка ( например, его имя) с волхвами c комментариями . Если вы хотите сгруппировать макеты в разные блоки, вам может потребоваться более одной функции импорта: 

const groupAImport = file =>
  import(
    /* webpackInclude: /layouts/(Container1|Container2).vue$/ */
    file
  ).then(m => m.default || m)

const groupBImport = file =>
  import(
    /* webpackInclude: /layouts/(Container1|Container3|Etc).vue$/ */
    file
  ).then(m => m.default || m)
...