模块化概述

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

1. 浏览器端模块化规范

• AMD require.js
• CMD Sea.js

2. 服务器端模块化规范CommonJS

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

3. ES6模块化

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

1） 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文件内容如下方代码
const presets = [
    ["@babel/env", {
        targets: {
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1"
        }
    }]
]
module.exports = { presets}

通过npx babel-node index.js执行代码

2. 默认导出与默认导入

默认导出语法 export default 默认导出的成员

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

// m1.js导出

let a = 10
let c = 20
let d = 30
function show() {}
export default {
    a,c,show
}

// index.js文件导入
import m1 from './m1.js'
console.log(m1)

3）按需导出与按需导入

• 按需导出语法 export let s1 = 10
• 按需导入语法 import { s1 } from '模块标识符'

export let s1 = 'aaa'
export let s2 = 'ccc'
export finction say(){
    console.log('111111')
}

import m1,{s1,s2} from './m1.js'
console.log(s1)
console.log(s2)
console.log(say)

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

for (let i=1; i<3; i++){
    console.log(i)
}

import './m1.js'