admin管理员组

文章数量:1426028

Consider the following file having multiple exports (a library of functions):

lib.js:

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

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

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

In other to work with shared code between environments, I need to build a intermediate file to import all the lib.js functions and make then available to new project as exports (module redirecting). Here is my code:

MyLib.js

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

Now I need to import the MyLib.js into my end code:

App.js

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

...

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

Under that syntax lib ends being null at my end code App.js.

These are variations I've used in MyLib.js and the result errors on App.js:

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

or

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

How can I properly redirect all my functions inside MyLib.js to make available all the lib functions (without expliciting all the lib`` functions insideMyLib`) ?

Consider the following file having multiple exports (a library of functions):

lib.js:

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

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

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

In other to work with shared code between environments, I need to build a intermediate file to import all the lib.js functions and make then available to new project as exports (module redirecting). Here is my code:

MyLib.js

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

Now I need to import the MyLib.js into my end code:

App.js

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

...

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

Under that syntax lib ends being null at my end code App.js.

These are variations I've used in MyLib.js and the result errors on App.js:

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

or

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

How can I properly redirect all my functions inside MyLib.js to make available all the lib functions (without expliciting all the lib`` functions insideMyLib`) ?

• javascript

Share Improve this question Follow edited Apr 15, 2019 at 12:18 Mendes asked Apr 15, 2019 at 12:00 MendesMendes 18.6k3838 gold badges166166 silver badges282282 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Is there a way to do it "in a bulk mode" without expliciting all the library functions?

No, dynamically puted value cannot be statically exported: ECMAScript 6 modules: the final syntax:

You may be wondering – why do we need named exports if we could simply default-export objects (like CommonJS)? The answer is that you can’t enforce a static structure via objects and lose all of the associated advantages (described in the next section).

---

You can either Default export:

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

export default Funct1;

Default import:

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

You can assign any name when importing, because it resolves to whatever the default export of lib.js is.

---

Or Named export:

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

Named import

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

In this case the import name must correspond with the export name since you're importing a specific thing by it's name.

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()

Try this in your MyLib.js:

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

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

Then in your 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() {}

Demo: https://codesandbox.io/s/62jrp3k83k

ECMAScript modules example:

/*
 * [package]/src/lib.mjs
 */
export function Func1() {
  // ...
}
export function Func2() {
  // ...
}
export function Func3() {
  // ...
}

/*
 * [package]/index.mjs
 */
export * from "./src/lib.mjs";

/*
 * App.mjs
 */
import { Func1, Func3 } from '[package]';
Func1();
Func3();

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()

本文标签： Correct way to import and export javascript function library (module redirect)Stack Overflow