将所有依赖项捆绑到一个导入文件中

Question

我一直在想。是否有任何库可以让我将使用的每个依赖项捆绑到一个捆绑包中，以便可以从中导入所有内容？

例如：

import x from "react-native-x"
import y from "react-native-y"
import z from "react-native-z"
import { View } from "react-native"
import React from "react"
import a from "./a"
import b from "./../../b"

对此：

import {
  x,
  y,
  z
  View,
  React,
  a,
  b
} from "./bundle"

Answer 1

我认为您正在寻找的是绝对路径。

以下是一些材料：

• https://goenning.net/2017/07/21/how-to-avoid-relative-path-hell-javascript-typescript-projects/
• https://spin.atomicobject.com/2017/10/07/absolute-paths-javascript/
• Webapck文档：https://webpack.js.org/configuration/resolve/

搜索诸如绝对路径，别名webpack之类的术语。

但是，如果不是这样，您可以做的一件事是：

1. 创建一个名为bundle的文件夹
2. 创建一个index.js文件，然后从其中导出任何内容
3. 将其用作导入的主要参考。

// bundle / index.js

export * from "react-native-x"
export {View} from "react-native"
export * from "./a"
export * from "./../../b"

一些出口参考：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

// Aggregating modules
export * from …; // does not set the default export
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

希望有帮助。