es6 import三种导入区别

ES6新语法常见有三种形式

type=module要跑到浏览器上要用liveserver开一个服务就可以使用esmodule的语法了
首先要注意，export导出的东西必须是一个声明或语句

如下图

而export default导出的必须是一个表达式

如下图

import xxx from “xxx”(随意命名)

这种情况是我们a.js使用export default方式导出

export default {
    name:1
}

b.js使用导入

 import xxx from “a.js”

这里的xxx 可以随意取名代表{ name:1}这个对象

import {…} from “…”（指定名字）

当a.js使用export方式导出时

export function a() {
    console.log(111)
}

b.js使用import {…} from “…”（指定名字）导入

import { a } from "./a.js";

这里导入必须写成对象形式，对象内部的必须写成a，因为a.js导出的叫a的函数

import * as from “…”（包装成对象）

把一个文件中export 的所有变量，包装成一个对象。
例如：

export const sqrt1 = Math.sqrt;
export const sqrt2= Math.sqrt;



import * as sqrtobj from "....."
sqrtobj.sqrt1
sqrtobj.sqrt2

或者使用as起别名
a.js

export function a() {
    console.log(111)
}

b.js中可以将导出的a函数起名为b，然后使用就使用b就行

import { a as b } from "./a.js";
console.log(b);

如果插件包是export default xxxx或者export 某个方法时，那么我们引入就使用import,相反如果插件包是module.exports xxxx，那么我们就要使用require引入包

commonjs和es6的export的区别

1. 两者的模块导入导出语法不同，commonjs是module.exports，exports导出，require导入；ES6则是export导出，import导入。
2. commonjs是运行时加载模块，ES6是在静态编译期间就确定模块的依赖
3. commonjs导出的是一个值拷贝，会对加载结果进行缓存，一旦内部再修改这个值，则不会同步到外部。ES6是导出的一个引用，内部修改可以同步到外部。