仅导入反应中的特定组件

时间:2016-11-28 16:24:23

标签: reactjs babel react-chartjs

我正在研究一个带有反应的网络项目 如何从库中仅导入3个组件 我用过:

import Line, Bar, Doughnut from 'react-chartjs-2';

给出错误。

import Line from 'react-chartjs-2';
import Bar from 'react-chartjs-2';
import Doughnut from 'react-chartjs-2';

使所有Line,Bar和Donut元素充当甜甜圈元素。

使用

import {Line, Bar, Doughnut} from 'react-chartjs-2';

加载整个库,这是我不想要的。

注意:我在多个文件中使用该导入。

1 个答案:

答案 0 :(得分:2)

关于作者如何构建,打包,导出组件/模块/类。

看看react-chartjs-2的gulpfile.js/lib,您会发现每个课程都没有作为模块导出(CommonJS),所以你只能导入类甜甜圈(或其他类):

import { Doughnut } from 'react-chartjs-2'

除非您将代码分开并自行重建。

如果您对为什么react-bootstrap可以做到这一点感兴趣,请检查其webpack configbuild toolscode structure。我们可以从中得到更多:

  • react-chartjs-2 的发布文件结构

    file structure of react-chartjs-2's distribution

  • react-bootstrap 的发布文件结构

    file structure of react-bootstrap's distribution