一、export关键字
在ES6中，模块化的暴露主要通过export关键字来实现。根据暴露方式的不同，可以将其分为以下几种类型：
1-1、分别暴露：
每个export都暴露各自的方法或者变量。
// test.js
export let a = 100;
export function sayHello() {
console.log("Hello, World");
}在其他文件中，可以使用解构赋值来引入这些暴露的变量或函数。
1-2、统一暴露
使用一个export暴露所有的方法和变量。
// test.js
let city = '北京';
const scorer = function() {
console.log("给我打分!");
}
export { city, scorer };引入时，可以直接通过解构赋值来引入所需的变量或函数。
1-3、默认暴露
使用export default来暴露一个默认值。
// test.js
export default {
data: "四月",
test: function() {
console.log("一个小测试!!!");
}
};引入时，可以直接使用
import关键字，不需要解构赋值。
1-4、ES6模块化暴露的注意事项
- 导入与导出的变量名匹配：在引入模块时，导入的变量名必须与导出的变量名相匹配，除非使用了
as关键字进行重命名。 - ES6模块化的兼容性：虽然ES6模块化是标准化的解决方案，但在某些老旧的浏览器或环境中可能不被支持。在这些情况下，可能需要使用构建工具（如Webpack、Rollup等）或转译器（如Babel）来将ES6模块化代码转换为更兼容的格式（如CommonJS）。
二、import 关键字
与暴露方式相对应，ES6也提供了几种引入模块的方式：
2-1、通用引入（整个模块）
使用import * as moduleName from 'modulePath'
// 引入m1.js模块
import * as _m1 from "js/m1.js";
_m1.teach();
2-2、解构赋值引入
直接引入模块中暴露的特定变量或函数。
// 引入m1.js模块中的a和teach
import { a, teach } from "js/m1.js";
console.log(a); // 输出 100
teach(); // 输出 "m1--我们可以教给你很多东西!"
2-3、默认引入
使用import defaultName from 'modulePath'
// 引入m3.js模块的默认暴露
import m3 from "js/m3.js";
m3.change(); // 输出 "m3---我们可以改变你!!"2-4、注意事项
- 命名冲突：当使用解构赋值引入多个模块时，如果变量名相同，则会产生命名冲突。可以使用
as关键字进行重命名。 - 导入路径：在
import语句中，'modulePath'需要替换为实际的模块文件路径。 - 模块化兼容性：虽然ES6模块化是标准化的解决方案，但在一些老旧环境或浏览器中可能不被支持。在这些情况下，可以使用构建工具或转译器进行转换。
