ES6模块化深入 debug

引子：

2020.2.24.最近刚写完一个vue项目。项目用到ES6的模块化

想到之前写node项目用到过commonjs模块化

就想着把所有用到过的模块化技术 总结学习一下

在看阮一峰老师的 es6入门那本书中讲到的module语法  

想着webstorm实现一下  ，验证书里写的一些特性

问题

写了两个文件

//module.js文件

let myName="laowang";
let myAge=90;
let myfn=function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
    myName,
    myAge,
    myfn
}

//main.js文件
import {myfn,myAge,myName} from './module'
console.log(myfn());//我是laowang！今年90岁了
console.log(myAge);//90
console.log(myName);//laowang

然后 run main.js  发现语法错误

思路：vue中es6模块化用的好好的，语法哪里用错了，看了文档也没错，就去b站搜模块化，然后看视频发现自己script 没有表明type

解决方案一

包裹在script标签中  type='moudle'  //因为用了模块化语法，要声明

报错：GET http://localhost:63342/commomjs/module net::ERR_ABORTED 404 (Not Found)

解决方案二

在方案一报错的基础上

找不到那么就是我引入的地址不对

//错误
import {myfn,myAge,myName} from './module'

//正确
import {myfn,myAge,myName} from './module.js'

成果

对es6模块化一系列的测试后

1.export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

// 写法一
export var m = 1;    //变量

export function f() {};    //函数

// 写法二
var m = 1;
export {m};

function f() {}
export {f};

// 写法三
var n = 1;
export {n as m};

2.另外，export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

3.export命令可以出现在模块的任何位置，只要处于模块顶层就可以

4.import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。

5由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构

6.import语句会执行所加载的模块