commonjs和es6模块化的使用

一、前端模块化

1.什么是模块化？

前端模块化是将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起，块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

一、 commonjs

commonjs是用于node环境的一个语法的模块化的一个规范，nodejs是这种规范的实现，根据CommonJs规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见，CommonJS规范加载模块是同步的，也就是说，加载完成才可以执行后面的操作，Node.js主要用于服务器编程，模块一般都是存在本地硬盘中，加载比较快，所以Node.js采用CommonJS规范。

定义模块

 // module.js
 let name = 'liakng xie';
 let sayName = function () {
   console.log(name);
  };
 module.exports = { name, sayName }
 // 或者
 exports.sayName = sayName;

加载模块

 // 通过 require 引入依赖
 let module = require('./module.js');
 module.sayName(); // likang xie

module.export跟exports的区别

1、module.exports 方法还可以单独返回一个数据类型(String、Number、Object...)，而 exports 只能返回一个 Object 对象
2、所有的 exports 对象最终都是通过 module.exports 传递执行，因此可以更确切地说，exports 是给
module.exports 添加属性和方法

exports.name = 'likang xie';
exports.age = 21;
console.log(module.exports); // 运行结果：{ name: 'likang xie', age: 21 }

3、同时用到module.export跟exports的时候

// 情况1
module.exports = { a: 1 }
exports.b = 2;
 // { a:1 }
console.log(module.exports);

// 情况2
module.exports.a =1;
exports.b = 2;
 // { a:1, b:2 }
console.log(module.exports);

二、 es6模块化

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

定义模块、输出变量

a.js

export default { name: 'likang xie' }

b.js

// 输出多个变量
export let name = 'likang xie';
export let sayName = () => console.log(name);

使用模块

import people from 'a.js';
console.log(people); // { name: 'likang xie' }

// 将所有获取到的变量存到people里
import * as people from 'b.js';
console.log(people); // 一个module对象 { name: 'likang xie', sayName: .... }

// 或者
import { name, sayName } from 'b.js';

es6模块化包含了improt ，improt from ，exprot，exprot default 。