ES-Module导入和导出

拨云见日

本篇文章主要是给大家介绍ES-Module导入和导出，还有一些需要注意的事项

导出

## 通过关键字 export 导出 #### 导出变量 //demo1.js let str = 'string' export str //demo2.js import { str } from ".demo1.js" console.log(str) // => string #### 导出多个变量或者是方法/对象 //demo1.js let arr = [] const fun1 = () => { } let num = 200 export {arr,fun1,num} //demo2.js import {arr,fun1,num} from "./demo1.js" console.log(arr,fun1,num) //=> [] , function ,200 #### 设置别名 //demo1.js let arr2 = [] export { name as fooname } //demo2.js import { fooname } from "./demo1.js" 重命名有一个特殊的情况，如果变量名是default 就必须使用as，因为default属于保留字 #### 默认导出 //demo1.js let str2 = 'string2' export default str //demo2.js import name from ".demo1.js" console.log(name) // => string2

注意事项

export导出语法需要注意的地方 //demo1.js内容如下 let num3 = 20; export { num3 } ;//注意这里并不是对面字面量的增强/或者是导出一个对象，仅仅是语法规定这么写 //demo2.js内容如下 import { num3 } form "./demo1.js";//这里也不是对象的解决仅仅是语法规定，请大家不要混淆 //如果要导出一个对象的话使用 export default 语法 //导出 demo1.js export default { num3 }; //引入 //这里就不能用 import { num3 } form "./demo1.js"语法了 import add form "./demo1.js" 使用ESModule语法的话，模块导出仅仅是引用并不是拷贝了一份新数据，commjs是直接拷贝了一份新数据 //demo1.js let name1 = 'loki'; let age2 = 20; setTimeout(() => { name = 'loken' }, 1000); export {name1,age2}; //demo2.js import { name1,age2 } from "./demo1.js"; name1 = 'spring' //=> 直接报错 因为导出的只读成员（也就是常量），并不可以改变 console.log(name1,age2) setTimeout(() => { console.log(name1,age2) }, 2000);

谢谢观看，如有不足，敬请指教