CommonJS规范和ES6规范的区别

CommonJS

• 暴露成员使用 module.export ={}
• 在引入成员时使用 const 成员 = require('成员路径')

// a.js
const getInfo = () => {
  return {
    name: 'zoe',
    age: 18
  }
}
module.exports = getInfo

// 在index.js 中引入
const getInfo = require('./js/api')
console.log(getInfo())

// 在index.html 中引入 index.js 文件并在浏览器中打开
<script src='./index.js'></script>
// 此时浏览器会报错，因为浏览器不支持 CommomJS规范

ES6

• 暴露成员 通过 export {成员}
• 通过 import {} from '成员路径去引入'

// b.js 通过 export 导出成员
const sum = (m, n) => {
    return m + n
}
​
const square = (m) => {
    return m * m
}
​
export { sum, square}

// 在 index.js 中进行导入
import {sum, square} from './js/utils.js'
console.log(sum(10, 20));
console.log(square(10));

// 在index.html 中引入 index.js 文件并在浏览器中打开
<script src='./index.js'></script>
// 此时浏览器会报错，因为浏览器不支持 ES6规范
// 解决办法就是在 script 标签中增加 type="module" 属性
<!-- <script src="./src/index.js" type="module"></script> -->