Как использовать динамический импорт веб-пакетов для субмодулей? - PullRequest
Новая
       16

Как использовать динамический импорт веб-пакетов для субмодулей?

0 голосов
/ 08 мая 2018

Допустим, у меня есть один файловый компонент <google-map> с шаблоном, который имеет компонент <widget> и компонент <marker>.

Если я динамически импортирую свой компонент <google-map>, он будет выглядетькак это: 

Vue.component(
    'google-map',
    () => import('@/components/maps/GoogleMapAsync.vue')
);

Теперь я знаю, что мне не понадобятся маркер или компоненты виджета вне компонента карты Google.

Поэтому, когда загружается мой компонент карты, я также хотел бы импортировать все импортируемые файлы, и даже предпочтительно, вплоть до нижней части этого дерева.

Итак, моя карта, компонент виджета и маркера все будет разделен на один блок.

Есть ли способ автоматизировать это в Webpack вместо непрерывного связывания или обработки обещаний из стека Promises.all?

Я полагаю, что одним из способов было бы поместить все импортные данные в один и тот же кусок следующим образом: 

import(/* webpackChunkName: 'googlemap', '@/components/maps/GoogleMapAsync.vue')

И сделать это для каждого компонента, я хочу быть частью блока googlemap, но это все ещемного ручной работы для чего-то, что, я надеюсь, может быть автоматизировано.

1 Ответ

0 голосов
/ 08 мая 2018

Попробуйте этот плагин babel-plugin-syntax-dynamic-import для веб-пакетов, который позволяет импортировать с помощью блоков веб-пакетов.Также убедитесь, что порции генерируются. 

// Webpack 
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js',
    chunkFilename: '[name].js'
  },

  rules: [{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    options: {
      plugins: [require('babel-plugin-syntax-dynamic-import')]
    }
  }]


// Vue code
methods: {
    LoadMarker() {
     this.componentMarker = () => import (`./path`)
        // Vue.js < 2.5 .0 // .then(m=> m.default) ; 
        }
  }
<component :is="componentMarker"></component>
...