正文
export default和export的使用方法
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Node中导出
向外导出成员，使用module.exports和exports
module.exports = {}
导出多个成员（必须是在对象中）
foo.js
exports.a = 123
exports.b = 'hello'
exports.c = function () {
console.log('ccc')
}
exports.d = {
foo: 'bar'
}
main.js
var fooExports = require('./foo')
console.log(fooExports) //{ a: 123, b: 'hello', c: [Function], d: { foo: 'bar' } }
导出单个成员（拿到的就是：函数、字符串）
foo.js
module.exports = 'hello'
main.js
var fooExports = require('./foo')
console.log(fooExports) //'hello'
以下情况会被覆盖
foo.js
module.exports = 'hello'//后者会覆盖前者
module.exports = function (x, y) {
return x + y
}
main.js
var fooExports = require('./foo')
console.log(fooExports) //[Function]
也可以这样来导出多个成员
module.exports = {
add: function () {
return x + y
},
str: 'hello'
}
exports与module.exports是相同的
console.log(exports === module.exports) //true
为什么exports与module.exports两者相同，但是使用 exports = 'foo' 最后得到的还是一个空对象。是因为最后模块的返回值是module.exports而不是exports，所以给exports直接赋值，exports丢失了之前对象的引用关系，指向了另一个字符串，所以最后是拿不到'foo'的
exports与module.exports总结
每个模块中都有一个module对象，module对象中有一个exports对象，我们可以把需要导出的成员都挂载到module.exports接口对象中，也就是module.exports.xxx = xxx的方式，但是每次都这样做很麻烦，所以Node为了方便，同时在每个模块中都提供了一个成员exports，exports === module.exports。所以对于之前的方式可以简写成exports.xxx = xxx。当一个模块需要导出单个成员时，必须使用 module.exports = xxx 的方式，不可使用exports = xxx 。因为每个模块最终向外导出的是module.exports，而exports只是module.exports的一个引用，所以即便为exports = xx 重新赋值，并不能影响module.exports 。但是有一种赋值方式比较特殊，就是exports = module.exports，这个会重新建立引用关系。
导入
Node中导入模块
const 名称 = require('模块标识符')
require具体加载规则链接
在ES6中规定了如何导入和导出模块导入：import 模块名称 from '模块标识符'
import '标识路径'
导出，使用export default和export暴露export default
export default向外暴露的成员可以使用任意的变量来接收//test.js
export default {
name: 'zs',
age: 10
}//main.js
import m1 from './test'
//m1 为一个包含 name 和 age 属性的对象
在一个模块中，只能使用export default向外暴露一次// test.js
export default {
name: 'zs',
age: 10
}export default {
name: 'xiaoming',
age: 10
}//会报错`Only one default export allowed per module`
export
在一个模块中可以同时使用 export default 和 export 暴露成员使用 export 向外暴露的成员只能使用 {} 接收，这种情况叫做 按需导出// test.js
export default {
name: 'zs',
age: 10
}export var title = "小星星"
//这样使用不会报错//main.js
import m1, { title } from './test'
一个模块中可以同时使用多个 export//test.js
export var title = "小星星"
export var content = '哈哈哈'// main.js
import { title,content } from './test'
如果想在引用时改变名称，可以通过 asimport { title as title123,content } from './test'
注意成套使用
import 模块名称 from '模块标识符'
import '标识路径'
导出，使用export default和export暴露
export default
export default向外暴露的成员可以使用任意的变量来接收
//test.js
export default {
name: 'zs',
age: 10
}//main.js
import m1 from './test'
//m1 为一个包含 name 和 age 属性的对象
在一个模块中，只能使用export default向外暴露一次
// test.js
export default {
name: 'zs',
age: 10
}export default {
name: 'xiaoming',
age: 10
}//会报错`Only one default export allowed per module`
export
在一个模块中可以同时使用 export default 和 export 暴露成员
使用 export 向外暴露的成员只能使用 {} 接收，这种情况叫做 按需导出
// test.js
export default {
name: 'zs',
age: 10
}export var title = "小星星"
//这样使用不会报错//main.js
import m1, { title } from './test'
一个模块中可以同时使用多个 export
//test.js
export var title = "小星星"
export var content = '哈哈哈'// main.js
import { title,content } from './test'
如果想在引用时改变名称，可以通过 as
import { title as title123,content } from './test'
注意成套使用
