【commonjs & ES6】模块化在JS中的使用

1.commonjs模块化：

        1.先建立main.js和a.js

mian.js:

第一种：var obj = require("./a");  

第二种：var {obj,fn}=require("./a");    // 解构赋值

第三种：var o=require("./b");
    
第一种调用：obj.fn();    // 调用a.js中的fn函数

第二种调用：console.log(obj);    // 直接调用解构赋值的变量名
           fn();

第三种调用：o.b()

a.js:

var obj={a:1,b:2};
exports.fn=function(){
    console.log("aa");
}
exports.obj=obj;

        2.一个文件导出一个默认的（b.js）

moudle.exports = {
    a:1,
    b:function(){
        console.log(this.a+"aaa")
    }
}

2.E6模块化：

第一种方法：

        1.新建main.mjs和a.mjs文件（注意是mjs）

 

a.mjs:

export default class Box{
    constructor(){

    }
    play(){
        console.log("play");
    }
}

main.mjs:

import Box from "./a.mjs";
var b = new Box();
b.play();

        2.在package.json的“scripts”中加入“dist”字段，并且设置属性为“nodemon ./es6/main.mjs”（因为是mjs文件所以文件名后面要打上文件类型）

        3.使用命令npm run dist 运行

第二种方法：

        1.新建main.js和a.js（与第一种方法区别在于文件名为js）

a.js：

export default class Box{
    constructor(){

    }
    play(){
        console.log("play");
    }
}

main.js：

import Box from "./a.js";
var b = new Box();
b.play();

        2.在package.json的“scripts”中加入“dist1”字段，并且设置属性为“nodemon ./es6/main”（因为是js文件所以文件名后面不用打文件类型）

        3.若直接使用npm run dist1 会报错

 解决方法：

在package.json中加入“type”： “module”,后可以解决报错

注：加入了“type”： “module”后，commonjs语法将不可用，并且所以引用后面要加入js或mjs