总结一下ES Module 容易踩坑的点，常见问题汇总

最近在拉钩教育上系统的学习了一下ES Module的一些内容，发现了一些在使用过程中几个容易踩坑的点

一：script标签问题

在这里插入图片描述
出现这个问题要检查在web环境中，html 的script 的标签

在这里插入图片描述
如果没有加这个type属性，机会报错，因为ES Module是ES6的语法，浏览器是识别不了的

题外话，如果在script标签里加了type = “module”会有如下几个特点：

会默认变为严格模式，在严格模式下不可以直接使用this
每个模块都会变成一个独立的私有作用域，外部是访问不到的
可以自动延迟执行脚本，不会阻塞渲染，和defer 的作用差不多，常见的现象就是在写得弹窗之后输出文字，文字会一直等待弹窗结束才输出，加了这个属性之后就会延迟这个脚本的执行
请求的外部链接必须要支持CORS

二：默认导出与普通导出的问题

先说普通导出：

在变量前面用 export声明

	export const msg = "hello tq~"

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

使用花括号

const msg = "hello tq~"

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

export{
    
    
    msg,
    add
}

那么对应的导入的语法都是这样的：

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

坑来了：这里普通导出的花括号只是固定语法固定搭配，并不是导出了一个对象，导入的花括号也只是固定语法固定搭配，也并不是解构赋值
在这里插入图片描述
这样是会报错的，所以这种普通导出的并不是一个对象，不是解构赋值！
不是解构赋值！ **不是解构赋值！**重要的事情说三遍

再来看默认导出：

const msg = "hello tq~"

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

export default{
    
    
    msg,
    add
}