CommonJS与ES6模块化规范

￡神魔★判官ぃ 2023-10-11 15:19 41阅读 0赞

### CommonJS规范 ###

1. 暴露单个 关键字 exports.xxx = xxx

const sum = (a,b) => {
        
    	return a + b
    }
    exports.sum = sum

2. 导入单个 require（）

const util = require("./a")
    console.log(util.sum(20,50))

导入单个时，util对象相当于exports对象，exports.sum = sum，相当于给exports这个对象添加了一个函数，函数名为sum,当导入时，声明的util对象就相当于这个exports对象

3. 默认暴露 module.export = xxx

const sum = (a,b) => {
        
    	return a + b
    }
    
    const red = (a,b) => {
        
    	return a - b
    }
    
    const mul = (a,b) => {
        
    	return a * b
    }
    
    const div = (a,b) => {
        
    	return a / b
    }
    
    //commonjs规范进行导出
    module.exports = {
        
    	sum,
    	red,
    	mul,
    	div
    }

同理，导入的这个util对象就是module.exports，module.exports又等于一个对象，这个对象有四个函数，所以util这个对象也应有四个函数

2. 默认导入，导入某个模块默认暴露的对象

const util = require("./a")
    console.log(util.sum(10,20))
    console.log(util.red(10,20))
    console.log(util.mul(10,20))
    console.log(util.div(10,20))

### ES6模块规范 ###

1. 暴露单个

export const name = '张无忌'
    export const sum = (a,b) => a + b

2. 导入单个

import {
        name} from "./b";
    import {
        name,sum} from "./b";

在ES6规范下，如果是使用export const xxx = xxx,单个暴露，那导入的时候可以按需导入，也可以全都导入。

1. 默认暴露

const obj = {
        
    	name:"张无忌",
    	say(){
        
    		console.log("hello")
    	}
    }
    
    export default obj

2. 默认导入

import obj from "./b";
    console.log(obj.name)
    console.log(obj.say())

如果使用的是默认导入，则只需要声明一个变量即可，obj这个变量就是 const obj = xxx，定义的这个对象。