详细讲解CommonJS与ES6模块化开发

1.CommonJS模块化开发

（1）创建工具类

//工具类
const sum = function(a,b){
    return a+b;
}
const sub = function(a,b){
    return a-b;
}
const mul = function(a,b){
    return a*b;
}
const di = function(a,b){
    return a/b;
}
// 导出给别人使用
module.exports = {
    sum,
    sub,
    mul,
    di
}

（2）导入调用

//require导入包,来使用我们导入的包
const m = require('./四则运算.js');

//要导出的才可以使用
console.log(m.sum(1,2));
console.log(m.sub(1,2));
console.log(m.mul(1,2));
console.log(m.di(1,2));

（3）输出结果

2.ES6模块化开发

（1）创建工具类

export function getList(){
    //在真实业务中，异步获取数据
    console.log("获取用户数据列表");
}
export function save(){
    console.log("保存数据");
}

（2）导入调用

import { getList,save } from "./userApi";
getList()
save()
//默认不支持es6语法。

（3）输出结果

（4）我们可以看见，输出不了结果，这是因为默认不支持ES6语法，import无法识别。这时候我们就需要Babel来降低版本运行。
第一步就是项目初始化 npm init -y

（5）第二步，创建 .babelrc文件，写入转码类型

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

（6）第三步，安装解码器，不安装我们是无法打包的。

 npm install --save-dev babel-preset-es2015

（7）第四步，将我们的代码部分放入src目录，然后在package.json中写入代码"build":“babel src -d dist” 记得前面加逗号

（8）第五步，执行输出文件命令npm run build

执行之后dict目录之下会生成userApi.js与userTest.js的ES5类型文件。转码的两个文件，游览器可以直接运行，

（9）第六步，执行 node .\dist\userTest.js 看是否能够输出

3.ES6模块化开发2

小伙伴们是不是觉得很麻烦呢，这里我们有一种新玩法：

（1）改写userApi.js里面的代码。

//前端开发中更多的是这种写法
export default{
    getList(){
        console.log("获取用户数据列表");
    },
    save(){
        console.log("保存数据");
    }
}

（2）改写userTest.js里面的代码。

import user from "./userApi";
user.getList()
user.save()
//默认不支持es6语法。

（3）重新编译再执行

我们可以看见，这和编译出来的代码和之前的是不一样的，但是本质是一样的。