Javascript 如何在JS中构造多个包之间的导出和导入

我在一个reactJs应用程序上工作，它使用我们内部开发的4个不同的包，所有这些包都是在npm上发布的

我想对进口进行分解，因为它是有价值的

现在我们有了

• 导出助手函数（前缀为hf）的packageHelperFunctions的index.js

• 导出组件功能（前缀为hc）的

  packageHelperComponents的index.js
  
  

• packageCore

  谁是应用程序的核心，请使用安装在

  package.json

  import { hf_function1,hf_function2,hf_function3, ..., hf_function20 } from "packageHelperFunctions";
  import { hc_function1,hc_function2,hc_function3 } from "packageHelperComponents";
  

  在index.js中，我导出由该核心包创建的组件，但也导出来自

  packageHelperFunctions

  和

  packageHelperComponents

  export { hf_function1,hf_function2,hf_function3, ..., hf_function20} from "packageHelperFunctions";
  export { hc_function1,hc_function2,hc_function3, ..., hc_function20 } from "packageHelperComponents";
  export { core_function1 } from "../a"
  export { core_function2 } from "../b"
  export { core_function3 } from "../c"
  export { core_function20 } from "../z"
  

• packageExtended

  谁是具有自定义颜色、徽标、页面等的应用程序的前端。它使用安装在

  package.json

  中的

  packageCore

  。我不想在此处安装

  packageHelperFunctions

  &

  packageHelperComponents

  以保持与

  packageCore

  import {
     hf_function1,hf_function2,hf_function3, ... , hf_function20,
     hc_function1,hc_function2,hc_function3, ... , hc_function20, 
     core_function1, core_function2, core_function3 , .... , core_function20
  } from "packageCore";
  

---

我发现它有点凌乱，而且非常冗长，但找不到一种简化它的方法

materialui

像这样使用语法

 import CssBaseline from '@material-ui/core/CssBaseline';
 import Typography from '@material-ui/core/Typography';
 import Container from '@material-ui/core/Container';

如何在

packageExtended

  import { core_function1, core_function2, .... , core_function20 } from "packageCore";
  import { hf_function1,hf_function2, hf_function20 } from "packageCore/packageHelperFunctions";
  import { hc_function1,hc_function2, ... , hc_function20 } from "packageCore/packageHelperComponents";

---

谢谢

您希望

导出默认值

使用这样的导入。查看MaterialUI的源代码也是学习好的模块拆分的一个好方法。

 import CssBaseline from '@material-ui/core/CssBaseline';
 import Typography from '@material-ui/core/Typography';
 import Container from '@material-ui/core/Container';

  import { core_function1, core_function2, .... , core_function20 } from "packageCore";
  import { hf_function1,hf_function2, hf_function20 } from "packageCore/packageHelperFunctions";
  import { hc_function1,hc_function2, ... , hc_function20 } from "packageCore/packageHelperComponents";