commonjs 和 es6模块化开发入门

commonjs模块化

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

//commonjs

let 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转换

这种写法会比上边那种会方便一些。
我们重新编译转换npm run build

运行