Question

我正在项目中使用lib并加载我通过commonjs模块系统预设的组件。代码如下所示：

let echart = require('echarts/lib/echarts');
require('echarts/lib/chart/scatter');
require('echarts/lib/component/title');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legendScroll');

因此，webpack生成的包大小为1.17 MB。

但是，我决定将项目迁移到typescript，从而通过导入es6来加载lib的组件。代码如下所示：

import * as echarts from 'echarts';
import ECharts = echarts.ECharts;
import EChartOption = echarts.EChartOption;

因此webpack生成的包大小为2.21 MB。因为以这种方式加载所有组件都是导入的，即使是我不使用的组件。

由于这种不便，我希望能够像普通人那样做，有人知道是否有可能以及如何做到这一点？

Answer 1

您可以执行与CommonJS相同的深度嵌套：

import echarts = require('echarts/lib/echarts')
import 'echarts/lib/chart/scatter'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legendScroll'

如果您在TypeScript 2.7中使用esModuleInterop，则可以对第一行执行此操作：

import echarts from 'echarts/lib/echarts'

按需导入模块组件

1 个答案: