模块化

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

1 浏览器端模块化规范:AMD、CMD

2 服务器端模块化规范

CommonJS

模块分为 单文件模块 与 包
模块成员导出：module.exports 和 exports
模块成员导入：require('模块标识符')

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

ES6模块化规范中定义：
 每个 js 文件都是一个独立的模块
 导入模块成员使用 import 关键字
 暴露模块成员使用 export 关键字

Node.js 中通过 babel 体验 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 默认导出 与 默认导入

默认导出语法 export default 默认导出的成员,每个模块中，只允许使用唯一的一次 export default，否则会报错！

默认导入语法 import 接收名称 from '模块标识符'

2 按需导出 与 按需导入

按需导出语法 export let s1 = 10,每个模块中，可以使用多次按需导出

按需导入语法 import { s1 } from '模块标识符'

3 直接导入并执行模块代码

只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码

// 直接导入并执行模块代码
  import './m2.js'