Babel-Plugin-Equire - плагин Babel, который загружает модуль Echarts по требованию

Babel ECharts

Build Status

Загружать модуль echarts по запросу

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

import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
скопировать код

Когда этот плагин вводится, нам нужно написать только это:

// eslint-disable-next-line
const echarts = equire([
  'line',
  'tooltip'
])
скопировать код

Этот плагин автоматически поможет нам конвертировать в вышеуказанную форму

Установить

npm i babel-plugin-equire -D

Затем в.babelrcдобавить плагин в файл

{
  "plugins": [
  	 // other plugins
  	 ...
  	 
    "equire"
  ]
}
скопировать код

Применение

Создайте новый файл initEcharts.js для инициализации модуля echarts, а затем напишите следующий код:

@/src/utils/initEcharts.js

// eslint-disable-next-line
const echarts = equire([
  'line',
  'tooltip'
])

export default echarts
скопировать код

Введение вышеуказанного файла initEcharts.js вместо необходимости использования echarts.

import echarts from '@/src/utils/initEcharts'
скопировать код

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

С разделением кода

вышеуказанный файлequireзаменитьequireAsync,В настоящее времяequireAsync()Возврат - это функция, и после выполнения функции она вернетpromiseобъект

// eslint-disable-next-line
const initEcharts = equireAsync([
  'line',
  'tooltip'
])

export default initEcharts
скопировать код

Использование в других документах:

import initEcharts from '@/src/utils/initEcharts'

initEcharts()
  .then(echarts => {
    // do somthing with echarts
  })
скопировать код

Полный вариант использования может относиться ксинхронная загрузка Асинхронная загрузка

API

После введения этого плагина при компиляции babel внедряются две глобальные функции:equireа такжеequireAsync

equire(modules)

  • Загрузить модуль синхронно и вернуть объект echarts
  • Модули параметров представляют собой массив, и передается имя модуля, который необходимо загрузить по запросу. Конкретное имя см. в правилах преобразования.

equireAsync(modules)

  • Загружать модуль асинхронно, возвращая функцию инициализации
  • Модули параметров представляют собой массив, и передается имя модуля, который необходимо загрузить по запросу. Конкретное имя см. в правилах преобразования.

Правила преобразования

Все перечислено нижеchartа такжеcomponentМодули плагина будут преобразованы в соответствующие пути в соответствии с именами этих модулей.Также вы можете напрямую указать путь для импорта модулей, напримерzrender/lib/vml/vml, на этот раз будет напрямую использоваться путь для импорта модуля

// @chart

  'bar',
  'boxplot',
  'candlestick',
  'chord',
  'custom',
  'effectScatter',
  'funnel',
  'gauge',
  'graph',
  'heatmap',
  'line',
  'lines',
  'map',
  'parallel',
  'pictorialBar',
  'pie',
  'radar',
  'sankey',
  'scatter',
  'themeRiver',
  'treemap'
  
// @component

  'angleAxis',
  'axis',
  'axisPointer',
  'brush',
  'calendar',
  'dataZoom',
  'dataZoomInside',
  'dataZoomSelect',
  'geo',
  'graphic',
  'grid',
  'gridSimple',
  'legend',
  'markArea',
  'markLine',
  'markPoint',
  'parallel',
  'parallelAxis',
  'polar',
  'radar',
  'radiusAxis',
  'single',
  'singleAxis',
  'timeline',
  'title',
  'toolbox',
  'tooltip',
  'visualMap',
  'visualMapContinuous',
  'visualMapPiecewise'
скопировать код
Категории