commonjs 和 es6模块化开发入门

commonjs模块化

首先写一个api，提供给外部调用

//commonjslet sum =(a,b)=> a+b;// 暴露接口
module.exports = {sum // sum:sum
}

导入调用

const m = require('./Api.js')console.log(m.sum(10,20));

在这里插入图片描述

es6模块化

首先写一个api，提供给外部调用

//es6
export function sum(a,b){return a+b;
}export function sub(a,b){return a-b;
}

导入调用

import {sub,sum} from "./Api.js"console.log("sub(100,30) = " ,sub(100,30));
console.log("sum(100,30) = ",sum(100,30));//如果直接 node test.js 是会报错了，因为默认是不支持es6 语法 我们需要使用babel转换

如果直接 node test.js 是会报错了，因为默认是不支持es6 语法我们需要使用babel转换
比如以下报错：
在这里插入图片描述

根据我们之前学过了Babel
1、首先我们初始化项目npm init -y 将其转换为node项目
在这里插入图片描述

2、创建.babelrc文件

{"presets":["es2015"],"plugins":[]
}

3、安装转换器 npm install --save-dev babel-preset-es2015
在这里插入图片描述

4、我们可以直接使用babel命令也可以使用package.json定义脚本。这里我们使用package.json定义脚本的方式。
package.json

{......,"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build":"babel src -d dist"},.....
}

在上边我们定义了build命令，这样我们执行npm run build，就可以在项目根目录下的dist目录中看到转换后的代码。
在这里插入图片描述

我们一起看看dist下的转换后的代码吧

Api.js

"use strict";Object.defineProperty(exports, "__esModule", {value: true
});
exports.sum = sum;
exports.sub = sub;
//es6
function sum(a, b) {return a + b;
}function sub(a, b) {return a - b;
}

test.js

"use strict";var _Api = require("./Api.js");console.log("sub(100,30) = ", (0, _Api.sub)(100 ,30));
console.log("sum(100,30) = ", (0, _Api.sum)(100, 30));//如果直接 node test.js 是会报错了，因为默认是不支持es6 语法 我们需要使用babel转换

执行成功
在这里插入图片描述

es6第二种写法

我们使用对象导出的方式
Api.js

export default{sum(a,b){return a+b;},sub(a,b){return a-b;}
}

test.js

import calculate from "./Api.js"
console.log("sub(100,30) = " ,calculate.sub(100-30));
console.log("sum(100,30) = ",calculate.sum(100,30));//如果直接 node test.js 是会报错了，因为默认是不支持es6 语法 我们需要使用babel转换