module.exports、export default以及export的区别以及用法

module.exports、export default以及export的区别以及用法

moule.exports是JavaScript 2015之前的语法，而后两种则是JavaScript 2015之后的语法，提供了export default默认导出和export名字导出两种文件导入导出的方式，在一次面试的时候问到require引入是es5还是es6的时候问懵了，所以就详细的查了一些网上的历史资料。

1. moule.exports

let path = "/local/file"
let obj = {
    name:"zs",
    age:18,
    sex:"男"
}

module.exports = {
    path,
    ...obj
}

在另一个文件中引用这个文件，然后打印出来

let myObj = require("./test")
console.log('myObj',myObj);

执行脚本命令后，得到的结果正是符合我们预期的结果（浏览器环境无法使用require命令）

$ node ./index.js
myObj { path: '/local/file', name: 'zs', age: 18, sex: '男' }

2. export default

let path = "/local/file"
let obj = {
    name:"zs",
    age:18,
    sex:"男"
}

export default {
    path,
    ...obj
}

是es6提供的一种文件模块化的方式之一，默认在一个页面中只能使用一个。在使用的时候，需要babel进行转成es5的语法才能使用，否则就会报错SyntaxError: Cannot use import statement outside a module，为啥在框架中可以肆无忌惮的使用es6的语法，那也是由于webpack集成的插件babel-loader完成了这一操作。

import obj from './test'
console.log('obj',obj);

3. export

let path = "/local/file"
let obj = {
    name:"zs",
    age:18,
    sex:"男"
}

export { obj, path }

文件命名导出文件

import { obj, path } from './test'
console.log('obj, path',obj, path);

以上就是我整理出的一些关于这个export模块的使用，有不合适的地方欢迎指正，互相学习。