非你网

在用webpack打包的时候，所打包的文件，会经常使用到 module.exports,exports,export和export default,import与require 这些语法。看起来眼花缭乱，其实，都是有迹可循的。

基本问题

1. module.exports 和 exports 是属于 CommonJS 模块规范。

2. export 和 export default 是属于 es6 语法。

3. 同样 import 和 require 分别属于 es6 和 CommonJS。

4. module.exports 和 exports、export 和 export default 都是导出模块。 import 和 require 则是导入模块。

module.exports 和 exports 的区别与联系

Node应用由模块组成，采用CommonJS模块规范。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

eg:

// 输出模块 test.js
var num = 5
//let add = (value) => value + num
function add(value){
    return value + num;
}

module.exports.num = num

module.exports.add = add

// 接入模块 main.js

var test = require('./test.js')
// 输出5
console.log(test.num)
// 输出6
console.log(test.add(1))

其实exports变量是指向module.exports，加载模块实际是加载该模块的module.exports。这等同在每个模块头部，有一行这样的命令。

exports = module.exports

于是我们可以直接在 exports 对象上添加方法，表示对外输出的接口，如同在module.exports上添加一样。注意，exports不能被赋值。

import 和 require 的区别与联系

import 和 require 是分别属于 ES6 和 CommonJS 的两种导入模块的语法而已。

export和 module.export 不能存在同一个js中，否则会出现意想不到的结果。可以分开。

eg:

// log.js
module.exports = function(value){
    console.log(value);
}

// info.js
var userinfo = {
    nickname:'vini123',
    gender:'1',
    email:'lichking_lin86@qq.com',
    web:'https://mlxiu.com'
}

var games = ['王者荣耀', '热血江湖', 'lol']

export {userinfo}

export {games}

export default {
    keys:[userinfo, games]
}

// main.js （这里可以import和require。注意import是编译时进行的，require是运行时。）

import {userinfo, games} from './info'

import keys from './info'

const say = require('./log')

say(userinfo)

say(games)

say(keys)

如果将 info.js 和 log.js 写在一个js中，就会得不到想要的结果了。

文章来源

http://www.cnblogs.com/Nutrient-rich/p/7047877.html