有没有更好的方法可以导入/导出组件库

Question

我有一个组件库，在其中我使用index.ts导入/导出组件。在构建组件时，我必须添加更多的导入和导出。作品以O(n)的形式增长。

有没有一种方法可以导出所有导入的文件？那样的话，我只需要导入组件，这将把工作量减半。这些组件将被命名为导入，如import { ComponentOne, ComponentTwo } from '@library'

指数.ts

// Imports: Components
import ComponentOne from '../src/components/ComponentOne';
import ComponentTwo from '../src/components/ComponentTwo';
import ComponentThree from '../src/components/ComponentThree';
import ComponentFour from '../src/components/ComponentFour';
// Exports
export {
ComponentOne,
ComponentTwo,
ComponentThree,
ComponentFour,
}

Answer 1

您还可以查看每个MDN文档的重新导出/聚合

语法会更干净，即：

export { ComponentOne } from '../src/components/ComponentOne';

Answer 2

您可以使用babel插件模块解析器，它可以简化项目中的require/import路径。例如，您可以编写utils/my utils，而不用像../../../../utils/my-utils那样使用复杂的相对路径。它将允许您更快地工作，因为在访问文件之前，您不需要计算目录的级别。

// Use this:
import MyUtilFn from 'utils/MyUtilFn';
// Instead of that:
import MyUtilFn from '../../../../utils/MyUtilFn';
// And it also work with require calls
// Use this:
const MyUtilFn = require('utils/MyUtilFn');
// Instead of that:
const MyUtilFn = require('../../../../utils/MyUtilFn');

Answer 3

您可以从您正在处理的同一文件中export，例如

export default ComponentOne;

不需要创建另一个文件只用于导出&像你一样进口。

Answer 4

如果不想维护index.js文件，可以使用babel-plugin-wildcard。

# install plugin
npm i babel-plugin-wildcard --save-dev

在babel.config.js:中的插件部分添加通配符

module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['wildcard'], // <-- add this
};

用法：

|- index.js
|- dir
|- a.js
|- b.js

index.js:

import * as Items from './dir';
console.log(Items.A);
console.log(Items.B);

查看插件GitHub页面了解更多信息。