JavaScript Modules are separated by files and loaded asynchronously. Exports are defined using theexportkeyword and imports are defined using进口keyword.

While the basics of imports and exports are simple to understand, there are many other ways to work with ES Modules. In this article, we’ll go over all of the ways in which you can export and import within your modules.

Exports

We’ll be looking into three types of exports:

1.默认导出

Every module has a singledefaultexport, which represents the main value that is exported from that module. You cannot have more than one default export in a module.

const foo = () => console.log('foo');export default foo;

We can also export a function declaration or a class declaration by default.

export default function foo() {
console.log('foo');
}

We can also export values as a default export.

导出默认555;

2. Named Export

Any variable declaration can be exported when it is created, by addingexport关键字在声明之前。这基本上使用变量名称作为导出名称创建命名导出。

导出const foo =（）=> console.log（'foo'）;

We can also immediately export function and class declarations.

export function foo() {
console.log('foo')
}

如果我们想导出已经定义的变量，我们可以通过将变量包装在卷曲括号中来做到这一点。这通常是在文件末尾完成的。

const foo = () => console.log('foo');导出{foo};

In order to rename the named export, use theaskeyword. We can also export other variables at the same time.

const foo = () => console.log('foo');
const bar = 123;export { foo as printFoo, bar };

3. Aggregated Exports

There are cases where we’ll have to import modules from another file and export them. This scenario can be mostly found in places where you are importing modules from several files, and exporting all of them from one file. This can get tedious when you are importing and exporting lots of things at the same time. ES Modules allows us to import and export multiple values at the same time.

export * from "./foo.js";

This will take all of thenamed出口./foo.js并重新出口。不过，它不会重新出口默认导出，因为一个模块只能具有一个默认导出。我们还可以从其他文件中专门导出默认模块，或者在重新输入该模块时命名默认导出。

export { default } from "./foo.js";// orexport { default as foo } from "./foo.js";

We can also selectively export different variables from another module, instead of re-exporting everything.

从“ ./foo.js”导出{foo as printfoo，bar};

Finally, we can wrap up an entire module into a single named export using theaskeyword. Suppose, consider the following file.

// funcs.js
导出函数foo（）{console.log（'foo'）}
导出函数bar（）{console.log（'bar'）}

We can now pack this into a single export which is an object containing all of the named and default exports.

export * as funcs from "./funcs.js";
// { foo: function foo(), bar: function bar() }

Imports

We’ll be looking into three types of imports:

1.默认导入

When we import a default value, we need to assign a name to it. Since it is the default, we can actually give it any name of your choice.

从“ ./foo.js”导入泡沫；

We can also import all of the exports, including named and default exports, at the same time. This will put all of them exports into an object, and the default export will be given the property namedefault.

从“ ./foo.js”中导入 *为foo;
// {默认：foo}

2. Named Imports

We can import any named export by wrapping the exported name in curly brackets.

进口{ foo, bar } from "./foo.js";

We can also rename the import as we import it using theaskeyword.

导入{foo作为foofunction，bar}来自'。/foo.js`

We can also mix named and default exports in the same import statement.

进口foo, { bar } from "./foo.js";

Finally, we can import a module without listing any of the exports we want to use in our file. This is called a副作用导入, and will execute the code in the module without providing us any exported values.

进口"./fruitBasket.js";

3. Dynamic Imports

Sometimes, we don’t know the name of a file before we import it or there isn’t a need to import a file until we are half-way through executing code. In those cases, we can use a dynamic import to import modules anywhere in our code.

Since ES Modules are asynchronous, the module won’t immediately be available. We have to wait for it to be loaded before we can do anything with it. If our module can’t be found, the dynamic import will throw an error.

这是一个很好的习惯try/catchwhen using dynamic imports.

async function printFn() {
尝试 {
const fooFn = await import('./foo.js');
} catch {
console.error("Error getting foo module:");
}
返回foofn（）;
}

Conclusion

One thing to remember is that exports and static imports can only happen at the top level of the module. Dynamic imports, on the other hand, can be done from within a function.

希望您发现这篇文章有帮助。如果是这样，请获得更多类似的内容subscribing to Decoded, our YouTube channel!