ES6模块化

Fri, 17 Dec 2021 08:35:25 +0000

一、基本导出导入

任意变量、函数和类都能作为导出类型

//export_demo.js

//导出变量
export var name = "john";
export const color = "red";
export const num = 7;

//导出函数
export function sum(num1, num2) {
  return num1 + num2;
}

//导出类
export class Person{
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

//import_demo.js
//导入变量、函数、类
import {name, color, num, sum} from "./export_demo.js";

console.log(name); //john
name = "mary"; //error 不能对导入的变量二次赋值

在html中引用模块化js的时候，需要在type指定为module：

<script type="module" src="./import_demo.js"></script>

导入一整个模块

import * as example from "./export_demo.js";

console.log(example.name) //john

更改导入变量的值

export var name = "mary";

export function changeName(newName) {
  name = "lily";
}

导入该变量和函数

import {name, changeName} from "./example.js";

console.log(name); "mary"
changeName("bob");
console.log(name); "bob"

name = kery; //error

二、重命名导出导入

使用as重命名导出

function sum(num1, num2) {
  return num1 + num2;
}

export { sum as add };

这时导入该函数的时候可以使用add作为函数名

import { add } from "./example.js";

如果在导入的时候需要重命名同样可以使用as关键字

ES6 on Blog

ES6模块化

一、基本导出导入

二、重命名导出导入