ES6 模块化

模块化

ES6模块化

1、node.js中通过babel体现ES6模块化（浏览器端commonjs不支持ES6的高级特性，所以要下载babel来转化成可兼容的版本）
2、npm install --save-dev @babel/core @babel/cli @babel/preset-env
3、@babel/node
4、npm install --save @babel/polyfill
5、根目录创建配置文件babel.config.js(配置.babelrc也
6、改造代码（详见前端工程化）
7、运行npx babel-node index.js

通过模块化解决下述问题

① 命名冲突
② 文件依赖
 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成
员，也可以依赖别的模块
 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护

浏览器端模块化规范

1. AMD
   Require.js (http://www.requirejs.cn/)
2. CMD
   Sea.js (https://seajs.github.io/seajs/docs/)
   AMD和CMD适用于浏览器端的 Javascript 模块化

CommonJS 适用于服务器端的 Javascript 模块化

ES6 模块化规范

浏览器端与服务器端通用的模块化开发规范。

每个 js 文件都是一个独立的模块
 导入模块成员使用 import 关键字
 暴露模块成员使用 export 关键字

大一统的模块化规范 – ES6模块化

① npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
② npm install --save @babel/polyfill
③ 项目跟目录创建文件 babel.config.js
④ babel.config.js 文件内容如右侧代码
⑤ 通过 npx babel-node index.js 执行代码
const presets = [
["@babel/env", {
targets: {
edge: “17”,
firefox: “60”,
chrome: “67”,
safari: “11.1”
}
}]
];
module.exports = { presets };

默认导出 与 默认导入

1.5 ES6 模块化的基本语法
 默认导出语法 export default 默认导出的成员
 默认导入语法 import 接收名称 from ‘模块标识符’

按需导出 与 按需导入

1.5 ES6 模块化的基本语法
 按需导出语法 export let s1 = 10
 按需导入语法 import { s1 } from ‘模块标识符’