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

通过模块化解决下述问题

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

浏览器端模块化规范

AMD Require.js (http://www.requirejs.cn/)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 ‘模块标识符’