Write the Code. Change the World.

10月 17

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

基本问题

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

  2. exportexport default 是属于 es6 语法。

  3. 同样 importrequire 分别属于 es6CommonJS

  4. module.exportsexportsexportexport default 都是导出模块。 importrequire 则是导入模块。

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 的区别与联系

importrequire 是分别属于 ES6CommonJS 的两种导入模块的语法而已。

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.jslog.js 写在一个js中,就会得不到想要的结果了。

文章来源

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注