ES模块

千万不要和CommonJs的规范搞混，两个额功能差不多，但是语法是不同的。虽然有点类似，刚开始我也搞混了。但是在webpack,也是用的是nodeJS进行编译的，所以可以吧这两个模块一起使用。

• 模块的定义， export,不能像commonJs用等号赋值，在尾部导出时，使用{}

function fun1(a ,  b){

  return a+b ;

}

export {fun1}
//或
export default fun1 ;
// 或
export function fun1(a,b){ 
  return a+b;
}

• 模块引入 import,当混合node的模块导出时，编译的js文件里，会把两者导出的变量合并在一起，但是用node 来运行时会报错，node不能识别export。用node导出的模块可以使用ES的import 引入

// test1.js
let a= {name:1};

function test1(){
    a={test:1} ;
    return a ;
}

let c="str";
export function test2(){
    return 1;
};
exports.a=a;
exports.c= c;
exports.test1= test1;
a= {fg:4}; //注意


// test2.js
import * as ES from "./test1.js" ;
const node = require("./test1.js");
import a from "./test1.js" ;

console.log(ES);
console.log(node);
console.log(a);//{name:1}

// ES 与 node 是一样的，把两者的导出融在一起
{test2: [Function], a: {name:1}, c: "str", test1: [Function], __esModule: true};

node.test1();
console.log(a);//{name:1}
// a没有变。

注意：a= {fg:4} ，当我在a.js里的最后一行加上a = {fg:4}, 不管是在a.js里还是b.js里都没有改变导出的变量。因为用的是exports 导出，也就是commonJS规范。但是当用ES的模块规范情况就变得不一样。

• 模块的运行机制：ES的模块加载是动态引用，不会缓存变量。也就是说加载的时候是对被加载的模块的引用。根据只读引用，当执行的时候会去被加载的模块取值。

// a.js
let a= {name:1};

function test1(){

    a={test:1} ;

    return a ;
}



let c="str";

export function test2(){

    return 1;
};
export {a} ;


exports.a=a;
exports.c= c;
exports.test1= test1;
a= {fg:4}; //注意 此时导出的 a 不再是 {name:1}



// b.js

const node = require("./a.js");
import * as ES from "./a.js";
import {a} from './a.js';

console.log(node.a) // {fg:4}    node 与 ES 一样引用的是同一个对象。
console.log(a)  // {fg:4}
ES.test1();
console.log(a) //{test:1}

并且要是混有node的模块定义，会以ES的模块定义为最终的值。