ES6模块化
ES6的模块化分为导出(export)与导入(import)两个模块。
npm init
生成package.json文件,里面有各种依赖包的信息。
修改package.json文件
{
"name": "text",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
export导出
导出一个变量。
要导出变量、函数或类,需要在其前面加export关键字。
export let x = 'Hellow';
export function GetName(){
return '张三';
}
export class Student{
constructor(name,age){
this.name = name;
this.age = age;
}
}
注意export关键字需要函数或类有名称,不能导出匿名函数或类。
JavaScript也支持先定义变量、函数或类,再导出:
let x = 'Hellow';
function GetName(){
return '张三';
}
export {GetName}
由于只导出了GetName,所以其他模块只能访问这个函数,而不能访问x变量。
导出多个变量
可以将这些变量包装成对象进行模块化输出。
let myName="姜子牙";
let myAge=90;
let myfn=function(){
return "我是"+myName+"!今年"+myAge+"岁了"
}
export {
myName,
myAge,
myfn
}
导出重命名变量
通过as来进行操作。
let myName="姜子牙";
let myAge=90;
let myfn=function(){
return "我是"+myName+"!今年"+myAge+"岁了"
}
export {
myName as name,
myAge as age,
myfn as fn
}
导入
一旦在模块中使用export导出外部能访问的变量、函数或类,其他模块使用import关键字进行引入,语法如下:
import { x1, x2 } from './OtherModule.js';
1、使用花括号指定导入内容,称为绑定。
2、指定从哪个模块导入绑定。
导入单个绑定
//t1.js
export let x = 'Hellow';
import {x} from "./t1.js"
console.log("x:",x);//x: Hellow
另一个模块能使用x值但是不能改变这个值。
import {x} from "./t1.js"
console.log("x:",x);//x: Hellow
x = 'Hi'//Assignment to constant variable.
导入多个绑定
//t3.js
let myName="姜子牙";
let myAge=90;
let myfn=function(){
return "我是"+myName+"!今年"+myAge+"岁了"
}
export {
myName,
myAge,
myfn
}
import {myfn,myAge,myName} from "./t3.js";
console.log(myfn());//我是姜子牙!今年90岁了
console.log(myAge);//90
console.log(myName);//姜子牙
导入全部模块作为对象
import * as info from "./t3.js";//通过*来批量接收,as 来指定接收的名字
console.log(info.myfn());//我是姜子牙!今年90岁了
console.log(info.myAge);//90
console.log(info.myName);//姜子牙
默认导出(export default)
一个模块只能有一个默认导出
对于默认导出,导入的名称可以和导出的名称不一致。
//t6.js
export default function(){
return "默认导出一个方法"
}
import myFn from "./t6.js";//注意这里默认导出不需要用{}。
console.log(myFn());//默认导出一个方法
导出多个变量
可以将所有需要导出的变量放入一个对象中,然后通过export default进行导出
export default {
myFn(){
return "默认导出一个方法"
},
myName:"姜子牙"
}
import myObj from "./t8.js";
console.log(myObj.myFn(),myObj.myName);//默认导出一个方法 姜子牙
混合导出
//t10.js
export default function(){
return "默认导出一个方法"
}
export var myName="姜子牙";
import myFn,{myName} from "./t10.js";
console.log(myFn(),myName);//默认导出一个方法 姜子牙
重命名export和import
如果导入的多个文件中,变量名字相同,即会产生命名冲突的问题,为了解决该问题,ES6为提供了重命名的方法。
export let myName = '我来自t12.js';
export let myName = '我来自t13.js';
import {myName as name1} from "./t12.js";
import {myName as name2} from "./t13.js";
console.log(name1);//我来自t12.js
console.log(name2);//我来自t13.js