假如我们要使用如下这些组件

image.png

那就要这么导入

import {Upload, Password} from '@components';

要这么使用的话,我们需要在components下将组件做一个统一的聚合:

// conponents下index.jsx
export _AuthWrapper from './authWrapper';
export _Banner from ./banner;
export _CountInput from './countInput';
export _CropperModal from './cropperModal';;
export _Dialog from './dialog';
export _FormItem from './formItem';
export _LazyComponent from './lazyCompoent';
export _Loading from 'from ./loading';
export _Password from './password';
export _Upload from './upload';

export const AuthWrapper = _AuthWrapper;
export const Banner = _Banner;
export const CountInput = _CountInput;
export const CropperModal = _CropperModal;
export const Dialog = _Dialog;
export const FormItem = _FormItem;
export const LazyComponent = _LazyComponent;
export const Loading = _Loading;
export const Password = _Password;
export const Upload = _Upload;

大家有没有发现将组件统一导出之前需要将他们统一导入到当前位置,显得麻烦的多


有没有更简便的方法呢?

有!

我们先直接看代码:

// index.jsx
export AuthWrapper from './authWrapper';
export Banner from './Banner';
export CountInput from './countInput';
export CropperModal from './cropperModal';
export Dialog from './dialog';
export FormItem from './formItem';
export LazyComponent from './LazyComponent';
export Loading from './loading';
export Password from './password';
export Upload from './upload';
export LqForm from './lqForm';

一步到位,一直讲组件从别的地方导出,这是个es6的新语法

但是,大部分浏览器不支持,解决方案就是使用webpack插件@babel/plugin-proposal-export-default-from进行转义

同时需要在.babelIrc文件中开启这个功能:

{
    "plugins": [
       
        ["@babel/plugin-proposal-export-default-from"]
    ]
}