Es6的模块功能几乎所有人都在用,而且实现的非常简单,可以说成为了通用的模块方案。主要就到处模块export和导入模块import。
Export
到导出模块可以是函数、类,也可以是var、let、const定义的变量,但是一定不能直接导出一个字符串或者数字,一个js里面可以有多个export,可以一起导出用花括号{}把要导出的内容都包裹起来:
代码语言:javascript复制const a = 10;
const b = {
c: 5
};
const d = () => {
console.log(8)
}
function f() {
console.log(9)
}
export {a, b, d, f}
也可以分别单个一个一个导出:
代码语言:javascript复制export const a = 10;
export const b = {
c: 5
};
export const d = () => {
console.log(8)
}
export function f() {
console.log(9)
}
Import
导入只需要注意命名要跟导出的命名一样,然后用花括号{}包起来:
代码语言:javascript复制import {a, b, d, f} from "./utils/plugin1";
console.log(a)
console.log(b)
console.log(d)
console.log(f)
如果没有名字对应打印出来的就是undefined。
还可以整个模块导入:
代码语言:javascript复制import * as lib from "./utils/plugin1";
console.log(lib.a)
console.log(lib.b)
console.log(lib.d)
console.log(lib.f)
还有一种默认导出一个的export default:
代码语言:javascript复制var obj = 5
export default obj;
用export default导出不需要用花括号{}包起来,导入的时候也不需要花括号{},名字也可以自己起
代码语言:javascript复制import lib from "./utils/plugin1";
因为export default只能导出一个,所以可以导出一个对象:
代码语言:javascript复制var obj = {
a: 10,
b(){
},
c: function () {
},
d:{
e: 15
}
}
export default obj;
或者:
export default {
a: 10,
b(){
},
c: function () {
},
d:{
e: 15
}
}
需要注意的是export和import只支持静态导入和导出,你只可以在模块的最外层作用域使用import和export,不可在条件语句中使用,也不能在函数作用域中使用import。
(完)