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

最新推荐文章于 2024-08-24 19:45:13 发布

原创最新推荐文章于 2024-08-24 19:45:13 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了JavaScript中模块导出和导入的不同方式，包括module.exports用于传统导出，export default用于设置默认导出，以及export用于命名导出。文章通过代码示例解释了它们的用法，并提到了在浏览器环境和框架中使用这些语法的注意事项，如需要Babel转换。

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

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

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: '男' }

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);

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模块的使用，有不合适的地方欢迎指正，互相学习。