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

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

lib.js:

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

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

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

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

export default Funct1;

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

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

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

MyLib.js

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

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

...

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

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

App.js

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

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

...

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

在该语法下，

lib

在我的末尾代码

App.js

处结束为

null

这些是我在

MyLib.js

中使用的变体，以及App.js上的结果错误：

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

从“./shared/MyLib.js”MyLib.js导入{default as lib}
App.js
在你的MyLib.js中试试这个：

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

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

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

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

然后在你的App.js中：

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

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

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

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

演示：

有没有一种方法可以在“批量模式”下完成这项工作，而不需要明确说明所有的问题
图书馆功能

否，无法静态导出动态计算的值：：

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


您可以默认导出：

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

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

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

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

export default Funct1;

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

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

默认导入：

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

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

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

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

export default Funct1;

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

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

导入时可以指定任何名称，因为它解析为
lib.js
的默认导出


或命名导出：

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

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

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

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

export default Funct1;

import Funct1 from './lib.js'
import MyFunc from './lib.js'
import Whatever from './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

在这种情况下，导入名称必须与导出名称相对应，因为您是按名称导入特定对象的


lib.js
MyLib.js
App.js
有没有一种方法可以在“批量模式”下完成这项工作而不显式说明所有库函数？最后一种是“批量”模式，您可以避免使用const创建对象并直接导出封装函数的对象