CommonJS 和 ES6 模块化

CommonJS

index.js

// 导入
// 方式一：直接导入
// const student = require('./student')
// const school = require('./school')
// console.log(student)
// console.log(school)// 方式二：解构导入
const { name, slogan, getTel } = require('./school')// 方式三：解构导入+重命名
const { name: stuName, motto,  getTel: stuGetTel } = require('./student')console.log(name)
console.log(slogan)
console.log(getTel)console.log(stuName)
console.log(motto)
console.log(stuGetTel)// 该文件使用 require() 引入文件，只能在 nodejs 环境中执行，
// 不能在浏览器中使用，不过可以借助 browserify 打包成新的可供浏览器识别的js文件
// 使用：
// 1、下载安装 browserify  =》 npm i browserify -g
// 2、编译 index.js 输入为 build.js  =》 browserify index.js -o build.js
// 3、页面中引入使用  =》 <script src='./build.js'></script>// commomjs 是社区模块化规范，是node环境的模块化规范，可以通过工具编译支持浏览器

school.js

const name = '清华'
const slogan = '知识改变命运'function getTel() {return '0372-6688999'
}
function getCities() {return ['北京', '上海', '广州', '深圳']
}
// 导出方式一：module.exports = value
module.exports = { name, slogan, getTel }// 导出方式二：exports.key = value
// exports.name = name
// exports.motto = motto
// exports.getTel = getTel

student.js

const name = '章三'
const motto = '好好学习'function getTel() {return '0372-7788999'
}
function getCities() {return ['北京', '上海', '广州', '深圳']
}
// 导出方式一：module.exports = value
module.exports = { name, motto, getTel }// 导出方式二：exports.key = value
// exports.name = name
// exports.motto = motto
// exports.getTel = getTel

ES6 模块化

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- type="module" 将 js 模块化引入，js 中的变量不在全局上面 --><script type="module" src="./index.js"></script><button id="btn">动态导入</button>
</body>
</html>

index.js

// 导入
// 方式一：导入全部（通用）
// import * as student from './student.js'
// console.log(student)// 方式二：命名导入（对应导出方式：分别导出、统一导出）
// import { name as stuName, motto as stuMotto, getCities } from './student.js'
// console.log(stuName, stuMotto, getCities)// 方式三：默认导入
// import student from './student.js'
// console.log(student)    // {age: 19, getTel: ƒ}// 方式四：命名导入和默认导入可以混合使用
// import getTel, { motto, getCities } from './student.js'
// console.log(getTel())
// console.log(motto)
// console.log(getCities())// 方式五：动态导入
// document.querySelector('#btn').onclick = async () => {
//   const stu = await import('./student.js')
//   console.log(stu)  // 将 student.js 中所有导出的内容都导入了进来
// }// 方式六：import 可以不接受任何数据
import './template.js'

student.js

// 分别导出
export const name = '章三'
const age = 19
const motto = '好好学习'function getTel() {return '0372-7788999'
}
function getCities() {return ['北京', '上海', '广州', '深圳']
}
// 默认导出
// export default {
//   age, getTel
// }
export default getTel
// 全部（统一）导出
export {motto, getCities
}
// 以上三种方式导出的内容为：
/*{default: {getTel }getCitiesmotto,name
}
*/