！！！
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);
npm init -y生成项目配置文件
- 安装
webpack
sudo npm install --save-dev webpack
npm install --save-dev webpack-cli
3.配置
webpack.config.js文件
- 打包
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
