ES6中的模块化

！！！

1. ES6中的模块化

我们知道NodeJS中分模块开发的概念，一个单独的文件就可以是一个模块

• ES6模块化的概念和NodeJs一样，一个单独的文件 就是一个模块
• ES6中的模块也是可以通过 关键字export暴露模块中的数据,也可以通过对应的关键字import导入模块, 使用模块中暴露的数据

2. ES6导出数据 和 引入数据的关键字

• export {xxx}; 导出/暴露 变量
• import {xxx} from "path"; 引入变量，path是要引入模块的路径，xxx必须要和 暴露出的变量名一样
• 可以像 解构赋值一样导出 和 引出
  • export {xxx, yyy, zzz};
  • import {xxx, yyy, zzz} from "path";

注意点:

• 接收导入变量名必须和导出变量名一致
• 如果想修改接收变量名可以通过 xxx as newName方式
• 变量名被修改后原有变量名自动失效

a.js文件

let name = "CC";

let age = 18;
let object =  {height:180,width:180};

//暴露数据
export {name,age,object};

index.js文件

//引入

//变量名和导出的一一对应
// 要是想修改变量名 用 as 新的变量名
import {name,age,object as Obj} from "./a.js";

console.log(name);
console.log(age);
console.log(Obj);

1. npm init -y 生成项目配置文件

2. 安装 webpack
sudo npm install --save-dev webpack
npm install --save-dev webpack-cli

3.配置webpack.config.js 文件

4. 打包 npx webpack index.js 打包js文件,执行结果下图

image.png

3.ES6中的默认导出和引入

• export default xxx;
• import xxx from "path";

注意:

• 一个模块只能使用一次默认导出, 多次无效
• 默认导出时, 导入的名称可以和导出的名称不一致

b.js文件

//默认导入和导出
let name = "YY";
export  default  name;

index.js文件

import name from "./b.js"
console.log(name);

执行 上面的安装操作 打印结果

image.png

4.多种方式 同时使用

let name = "CC";
let info= {
    message:"这是一个测试信息"
};

function sayHi() {

    console.log("您好");
}


export {name,info,sayHi};

class Person {
    constructor(){
        this.name = "ls";
        this.age = "18";

 }
}

export  default Person;

index.js 文件

import Person,{name,info,sayHi} from "./c.js";

let p = new Person();
console.log(name);
console.log(info);
console.log(sayHi());

image.png