default 的使用
我们都知道，如果一个类库在export时提供了default，即：
export default xxlib`
那么我们就能够直接使用
import xxlib from "xxlib"
这样的方式，而如果直接
export {method}`或`export const method = xxx
则引入方式只能是
import {method} from "xxlib"
而如果想将xxlib中所有的方法引入到一个变量中，则可以使用：
import * as xxlib from "xxlib"
这时，export default xxx导出的方法，则会包含在xxlib的default字段下。
import 中的解构赋值
假设又一个文件student.js:
// student.js
export default {
name: "bili",
age: 16
}
我们想在score.js中引入：
// score.js
import student from "./student"
const {name} = student;
console.log(name);
这是完全ok的，但是当我们尝试在import时使用解构赋值，则会出现问题：
// score.js
import {name} from "./student"
console.log(name);
此时的name值是undefined，这是为什么呢？
原来，import中的解构与一般意义上的解构并不完全一致，我们的代码在经过babel转译之后会发生变化：
export default {
name: "bili",
age: 16
}
事实上会变成：
module.exports.default = {
name: "bili",
age: 16
}
也就是说，我们在import时，实际拿到的是：
{
default: {
name: "bili",
age: 16
}
}
这下我们就能明白为什么我们的解构赋值会不生效了。同时需要注意，我们在import student from "student"时，程序实际上会去自动获取student.js的default下的值，舅舅是为什么能够直接获取student的原因。
根据以上原理，我们如何才能实现import的解构赋值呢？其实很简单，只要我们能够将default下的值直接复制到module.exports下不就可以了吗？即实现以下操作：
module.exports = exports['default'];
当然这个过程已经有相应的插件babel-plugin-add-module-exports帮我们实现了，具体用法看文档即可，安装之后我们就能愉快的使用import的解构语法了：
import {name} from "./student"
export 导出解构对象
有时候我们需要批量导出已知类库的方法，这个时候我们使用export {module1, module2, ...}这样的方法就会显得非常繁琐，那么我们可不可以直接使用对象解构批量导出呢？类似这样：
import xxxlib from "xxxlib"
export {...xxxlib}
很遗憾，答案是不可以。因为export {module1, module2}中的{module11, module2, ...}实际上并不是一个对象，而是一个exports列表！。明白了吧，所以在这里使用解构是不成立的。
而export default {...xxxlib}确是可以生效的，但缺点也很明显，无法在import时直接使用解构赋值获取，原因上面已经做过解释。
最后一种方案，我们如果直接使用module.exports，则可以实现类似的解构效果。
module.exports = {...xxxlib}
但是需要注意的是，新版本的babel不支持import和module.exports的混合使用(但是require和export的混用是支持的)。这意味着我们在使用module.exports时，只能够使用require来导入依赖文件了。
综上，目前还没有一个较为优雅的处理方式，期待以后能有更好的方案吧！
从类库直接 export 指定方法
有时候我们可能需要从某个包中直接导出某些方法，这时我们可以直接：
export {method1, method2} from "xxxlib"
这时method1和method2将会同其它导出项一起export出去，非常简洁。
网友评论