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