Как исключить DevExtreme из процесса сборки vue cli? - PullRequest
Новая
       74

Как исключить DevExtreme из процесса сборки vue cli?

0 голосов
/ 06 мая 2019

В настоящее время мы разрабатываем расширенную сетевую DataGrid на основе DevExtreme DataGrid.Мы разработали этот расширенный DataGrid как самостоятельный инструмент, используя https://cli.vuejs.org/.

. Затем мы интегрируем этот расширенный DataGrid в наше основное веб-приложение.В веб-приложение мы уже интегрировали DevExtreme, потому что мы используем больше компонентов DevExtreme.

Мы хотели бы удалить библиотеку DevExtreme из производственной сборки vue.С одной стороны, библиотека очень большая, что сильно раздувает автономный инструмент.С другой стороны, мы уже интегрировали DevExtreme в наше основное приложение.Если бы мы не удалили их из расширенной DataGrid, мы бы дважды слили библиотеку в наше основное веб-приложение.

Мы используем

  • vue cli 3.5.x
  • devextreme & devextreme-vue 18.2.x

Я пытался исключить библиотеку с 

{
  // ..
  "dependencies": {
    "core-js": "^2.6.5",
    "merge": "^1.2.1",
    "moment": "^2.24.0",
    "vue": "^2.6.6"
  },
  "peerDependencies": {
    "devextreme": "^18.2.7",
    "devextreme-vue": "^18.2.7"
  },
  // ..
}

const webpack = require('webpack');

function getProdExternals() {
  return {
    devextreme: 'devextreme',
    'devextreme-vue': 'devextreme-vue'
  };
}

module.exports = {
  configureWebpack: {
    externals: process.env.NODE_ENV === 'production' ?
      getProdExternals() : {}
  }
}

но с этим решением я не знаю, кточтобы правильно включить компоненты devextreme в файлы * .vue (например, import DxPivotGrid from 'devextreme-vue/pivot-grid';), например, в следующем коде 

<template>
  <div
    class="pivot-grid"
    v-bind:style="{ display: display }">
    <!-- ... -->
    </dx-pivot-grid>
  </div>
</template>

<script>
import DxPivotGrid from 'devextreme-vue/pivot-grid';

const dxPivotGridRefName = 'PivotGrid';

export default {
  name: dxPivotGridRefName,
  components: {
    DxPivotGrid
  },
  data() {
    return {
      dxPivotGridRefName
    };
  },
  props: {
    dataSource: String,
    configuration: Object
  },
  computed: {
    // ...
  }
};
</script>

Я ожидаю, что библиотека DevExtreme не будет включена в процесс производственной сборки,Более того, автономная DataGrid должна ожидать, что DevExtreme Bibliothel будет встроена в веб-приложение как внешняя библиотека.

Пример того, как мы встраиваем DevExtreme и расширенную DataGrid в наше основное веб-приложение: 

/* DevExtreme, 
 * see https://js.devexpress.com/Documentation/Guide/Common/Modularity/Create_a_Custom_Bundle/ 
 */
import './External/dx-custom-config';

/* Extended DataGrid */
import './../node_modules/@init/extended-data-grid/dist/extended-data-grid.umd';

Я надеюсь, что вы можете помочь нам.С наилучшими пожеланиями Даниэль

...