RequireJS

define(['module1', 'module2'], function(m1, m2) {
   ...
});

require(['foo', 'bar'], function ( foo, bar ) {
        foo.doSomething();
});

CommonJS

可以导出任何类型：

module.exports = {
    name: 'banana',
    age: 18,
    eat: function(){
        console.log('I like eating banana')
    }
}

module.exports.userName = 'admin'

CommonJS导入：

const obj = requier('./module.js')
console.log(obj)

ES Module

导出

const obj = {
    name: 'banana',
    age: 18,
    eat:() => {
        console.log('I like eating banana')
    }
}
const userName = 'admin'
export { obj, userName }

导入

import { obj,userName } from './module.js'

通过 as 重命名

const usrename = 'admin'
const password = '123456'
export {
    usrename as name,
    password as pass
}

import { name, pass} from './module.js'

默认导出 export default

// ./module.js
const usrename = 'admin'
export default name

import newname from './module.js'

默认导出多个成员

export default {
    name: 'banana',
    age: 18
}

import handle from './module.js'
console.log(handle.name) //banana
handle.eat() // i like eating bananas

当要导出大量成员时，可以用一个变量来接收

export { name, age, address,...}

import * as obj from './module.js'

同时导出命名成员和默认成员：

const name = 'banana',age = 18
export { name, age}
export default 'default value'

// 第一种
import { name, age, default as title} from './module.js'
// 第二种
import title , { name, age} from './module.js'

ES Module 注意点： 当我们只想运行模块，而不是获取其中的变量时，可以写

• import './module.js'
• 通过给script标签添加 type="module" 属性 <script src="./module.js" type="module">