导入和导出javascript函数库的正确方法（模块重定向）

Question

考虑以下具有多个导出功能的文件（一个函数库）：

lib.js：

export const Funct1 = () => {
...
}

export const Funct2 = () => {
...
}

export const Funct3 = () => {
...
}

除了要使用环境之间的共享代码外，我还需要构建一个中间文件来导入所有lib.js函数，然后将其作为导出（模块重定向）提供给新项目使用。这是我的代码：

MyLib.js

export { default as functionlib } from "./src/helpers/lib";

现在我需要将MyLib.js导入到我的最终代码中：

App.js

import { lib } from "../shared/MyLib.js"

...

// Later use the function
let a = lib.Funct1();

在该语法lib下，我的结束代码null以App.js结尾。

这些是我在MyLib.js中使用的变体，以及App.js上的结果错误：

import { default as lib } from "../shared/MyLib.js" <--- ERROR: lib ends being null

或

import { * as lib } from "../shared/MyLib.js" <--- ERROR: unexpected token at * 

如何正确重定向MyLib.js内的所有函数以使所有lib函数可用（而无需显式显示所有lib`` functions inside MyLib`）？

Answer 1

  

有没有一种方法可以“以批量模式”执行而无需明确所有   库功能？

否，动态计算的值不能静态导出：ECMAScript 6 modules: the final syntax：

  

您可能想知道–如果我们可以简单地默认导出对象（例如CommonJS），为什么我们需要命名导出？答案是，您不能通过对象强制执行静态结构，而失去所有相关的优势（在下一节中介绍）。

---

您可以默认导出：

//lib.js
const Funct1 = () => {
...
}

export default Funct1;

默认导入：

import Funct1 from './lib.js'
import MyFunc from './lib.js'
import Whatever from './lib.js'

您可以在导入时分配任何名称，因为它可以解析为lib.js的默认导出。

---

或命名导出：

//lib.js
export const Funct1 = () => {
...
}

命名导入

import { Func1 } from './lib.js'
import { MyFunc } from './lib.js' //Doesn't work
import { Whatever } from './lib.js' //Doesn't work

在这种情况下，导入名称必须与导出名称相对应，因为您是用导入的名称来导入特定事物的。

More on the subject

---

lib.js

export const Funct1 = () => {
...
}

export const Funct2 = () => {
...
}

export const Funct3 = () => {
...
}

MyLib.js

export {
  Funct1,
  Funct2,
  Funct3,
} from "./src/helpers/lib";

//You can easily add more
export {
  Foo,
  Bar
} from "./src/helpers/fooBar";

App.js

import * as MyLib from "../shared/MyLib.js"

// Usage
MyLib.Funct1()
MyLib.Foo()

Answer 2

在您的 MyLib.js 中尝试以下操作：

import * as lib from "./src/helpers/lib";

export default lib;
export * from "./src/helpers/lib";

然后在您的 App.js 中：

import lib from "../shared/MyLib.js";
// OR
import { Funct1 } from "../shared/MyLib.js";

console.log(lib.Funct1); // function Funct1() {}
console.log(Funct1); // function Funct1() {}

演示：https://codesandbox.io/s/62jrp3k83k

Answer 3

MyLib.js

import { Funct1, Funct2, Funct3 } from "./src/helpers/lib";

const MyLibs = {
  Funct1,
  Funct2,
  Funct3,
};

export default MyLibs;

App.js

import MyLib from "../shared/MyLib.js"

// Usage
MyLib.Funct1()