“This is the 19th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Some time ago when code quality inspection, suddenly error module does not exist. After code investigation, it was found that the export and import mode of the module did not match. What? Isn’t ES Module a daily development skill? This has to be broken down for the whole article. Of course, if you’re already familiar with the ES Module API, there’s not much to look at below.

ES Module

ES Module is a new Module loading method proposed in ES6. In my opinion, the biggest benefit of ES Module is to replace commonJs and AMD Module loading methods, and realize the unification of server side and browser side Module loading. Of course, ES Module also has great benefits in terms of resource loading speed and static analysis, but it is not in our current consideration.

ES the Module’s secret

The export of grammar

1. Export + variable declaration

This approach should be one of the most frequently used interface exports in your daily development, especially when encapsulating common methods or extracting business modules.

The syntax for this approach is export + variable declarations (var, const, and let are all acceptable), but it does not support the use of variable names directly after export.

    // Use it correctly
    export const moduleName = "es module";

    export const moduleType = "js";

    export const moduleSize = 200;

    // Incorrect usage
    export moduleName;

    const moduleType = "js";

    export moduleType;
Copy the code

It should be noted that the export command specifies the external interface and must establish a one-to-one correspondence with variables inside the module

2. export + {}

This way of interface export, to put it plainly, is to carry out a large number of logical layout in the module, and then export the interface that needs to be opened to the outside at the bottom of the module.

I don’t know about your usage, but in my opinion, this way of exporting interfaces is probably not used very often in daily development. However, I often see them in the source code of many third-party libraries. Quietly speaking, this export method is actually a preferred way of official recommendation. The biggest advantage of this writing method is readability, you can quickly find the export interface at the bottom of the module, and then import the interface you want to use.

    const moduleName = "es module";

    const moduleType = "js";

    const moduleSize = 200;

    export {
      moduleName,
      moduleType,
      moduleSize,
    }
Copy the code

3. export default

I believe that as long as you know something about ES Module, you should know this API. React and Vue use this API extensively.

My understanding of this API is actually the syntax sugar of the previous second syntax, which is equivalent to export {* as default}. Let’s write it down for now and take a look at it when we talk about import later.

    const moduleInfo = {
      name: 'es module'.type: 'js'.size: 200,}export default moduleInfo;
Copy the code

The import of grammar

1. Import common interfaces

For the first two interface export modes in Export, import has corresponding interface import modes. Import {[name]} from ‘[moduleName]’, where name corresponds to the interface name of export and the moduleName or module path of moduleName.

Export {[name]} does not support import [name].

    // Use it correctly
    import { moduleName, moduleType, moduleSize } from './modules/index';

    // Incorrect usage
    import module from './modules/index';
Copy the code

2. Import default interface

There is also a matching interface import mode for the interface exported by Export Default [name]. The more common import method is import [name], which is the most frequently used import method in our daily development.

    // Use it correctly
    import module from './modules/index';

    // Incorrect usage
    import { module } from './modules/index';
Copy the code

Of course, there are other clever tricks that can be introduced. Export default is export {* as default}. If this is true, we can import it by importing the normal interface. (It has been proved to be completely feasible).

    import { default as module } from './modules/index';
Copy the code

3. import *

To be honest, it’s pretty easy without considering the tree Shake code, but I can’t imagine a good application scenario considering the Tree Shake code.

    import * as module from './modules/index';
Copy the code

A combination of export and import

I have to admire the strength of the big guys, but you can use export and import alone, or combine them together, which is not only more convenient, but also more arrogant. To tell you the truth, the first time I saw this writing method in the source code, the first reaction is what this thing, Baidu once, immediately jumped up, I wipe, this thing is too cow skin, can also write so?

    export * from './modules/index'
Copy the code

This code looks a little hard to understand, but is actually a variation of this code:

import * as index from './modules/index'; export { ... index }Copy the code

Seeing this, I can’t help but want to do some flower work.

    / / live a flower
    export { default as help } from './help';

    / / live two flowers
    export { cancel as default } from './help'; 
Copy the code

In fact, it is for the sake of flowers and flowers, feel the latter two have no practical application scenarios.

At the end

After reading this article, you have a better understanding of the ES Module API, and you can’t wait to give it a try. Don’t worry, just like and follow the comments for three times, and then go do your thing.

Welcome friends to exchange yo.