Summarize the points that ES Module is easy to step on, and a summary of common problems

Recently, I have studied some content of ES Module systematically in the drag hook education, and found some points that are easy to step on during the use process.

One: script tag problem

To check for this problem in the web environment in, HTML script of the label

If you don’t add this type attribute, you may get an error because ES Module is the syntax of ES6 and the browser can’t recognize it.

Off topic, if type = "module" is added to the script tag, it will have the following characteristics:

• Will become strict mode by default, you cannot use this directly in strict mode
• Each module will become an independent private scope, which is not accessible from outside
• It can automatically delay the execution of the script without blocking the rendering. It is similar to the function of defer. A common phenomenon is to output text after the pop-up window is written. The text will wait for the end of the pop-up window to be output. After adding this attribute, the script will be delayed. Execution
• The requested external link must support CORS

Two: The problem of default export and ordinary export

Let me talk about ordinary export:

1. Use export declaration in front of the variable

	export const msg = "hello tq~"

	export function add(x){
    
    
    	return function(y){
    
    
        	return x + y
    	}
	}

2. Use curly braces

const msg = "hello tq~"

function add(x){
    
    
    return function(y){
    
    
        return x + y
    }
}

export{
    
    
    msg,
    add
}

Then the corresponding import syntax is like this:

import {
    
     msg ,add} from  './module.js'
console.log(msg)
console.log(add(1)(2))

Pit came : here the ordinary export braces only fixed with fixed grammar , not a derived object to import only fixed braces fixed with grammar, it does not deconstruct assignment

this is being given, so this general export Is not an object, not a destructuring assignment!
Not destructuring assignment! **Not a destructuring assignment! **Say important things three times

Let's look at the default export:

const msg = "hello tq~"

function add(x){
    
    
    return function(y){
    
    
        return x + y
    }
}

export default{
    
    
    msg,
    add
}

If we export in this way, then the exported object is an object
. Let’s verify it by importing.

But if we use curly braces when the default export is worthwhile, we will report an error.

So it’s still the same sentence, it’s not a destructuring assignment.

I understand the default export, that is, only export the things after default, followed by curly braces, then only export curly braces, then when receiving, it must be a value to receive

Problems using ES Module in node

the first method:

First of all: change the suffix name,

remember to change the path too

Run from the command line

node --experimental-modules index.mjs

--Experimental-modules This command is an experimental environment of node

The second method:

Add a configuration to package.json


Use command execution

node --experimental-modules index.js

But if you want to use commonJS, you need to change the suffix of commonJS to cjs.