【重磅干货】关于ES6的模块导入导出及Nodejs的模块导入导出及相互交叉导入导出的总结【import、module.exports、export、require之间的转换关系】

亦凉 2021-09-20 10:22 582阅读 0赞

**三、ES6 和nodejs 交叉导入导出【JavaScript最核心的地方,有坑,请注意】**  
**第一种情况：【ES6默认导出,而另外一个文件使用require导入】**  
export default Vue;  
const VueWhat = require("Vue");  
**这里实际导出的Vue=VueWhat.default【\*\*\*\*\*非常重要,很容易搞懵\*\*\*\*】**

**第二种情况：【ES6对象导出,而另外一个文件使用require导入】**  
export \{ Vue \};  
const \{ Vue \} = require("Vue");  
// 这里正常导出// 一、ES6的模板语法【ES6导入导出ES6非常简单】

一、ES6的模板语法【ES6导入导出ES6非常简单】
    
    import Vue from "vue";
    导出默认值【仅会导出唯一的对象】
    export default Vue;
    导出多个值,用对象包裹
    export { Vue };
    
    
     二、nodejs的语法【nodejs导入导出nodejs非常简单】
    
    module.exports = Vue;
    const Vue = require("Vue");
    
    切记：exports只是module.exports的快捷方式
    【非常重要】改变exports内部的属性会改变module.exports,但是改变exports是不会改变module.exports
    exports = module.exports; 不推荐使用【建议直接改变module.exports,避免出错】
    
    
    三、ES6 和nodejs 交叉导入导出【JavaScript最核心的地方,有坑,请注意】
    第一种情况：【ES6默认导出,而另外一个文件使用require导入】
    export default Vue;
    const VueWhat = require("Vue");
    这里实际导出的Vue=VueWhat.default【非常重要,很容易搞懵】
    
    
    第二种情况：【ES6对象导出,而另外一个文件使用require导入】
    export { Vue };
    const { Vue } = require("Vue");
    // 这里正常导出// 一、ES6的模板语法【ES6导入导出ES6非常简单】