export和export default的区别以及require和import的区别

最新推荐文章于 2023-09-18 13:50:35 发布

花小染�

最新推荐文章于 2023-09-18 13:50:35 发布

阅读量343

点赞数 2

分类专栏：问题学习记录文章标签： javascript es6 vue.js

原文链接：https://zhuanlan.zhihu.com/p/121770261

版权

问题学习记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

export和export default的区别以及require和import的区别

近期在准备复习一些概念以及知识，看了一些文档以及其他资源，这边做一下记录，为日后复习。
export与export default区别与用法参考原文地址：https://blog.csdn.net/Deft_MKJing/article/details/80388770
mdn地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export
require与import区别与用法参考原文地址：https://zhuanlan.zhihu.com/p/121770261
import MDN地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import

export和export default的用法与区别

在创建JavaScript模块时，export 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。在使用import进行导入时，这些绑定值只能被导入模块所读取，但在export导出模块中对这些绑定值进行修改，所修改的值也会实时地更新。无论您是否声明，导出的模块都处于严格模式。 export语句不能用在嵌入式脚本中。
有两种不同的导出方式，命名导出 export和默认导出 export defaul。你能够在每一个模块中定义多个命名导出，但是只允许有一个默认导出
export导出可通过{}输出多个值，import导入时通过解构赋值按需取用需要用的模块。export default只能输出1个值，import导入时不需要{}

// 导出单个特性
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

// 导出列表
export { name1, name2, …, nameN };

// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };

// 解构导出并重命名
export const { name1, name2: bar } = o;

// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// 导出模块合集
export * from …; // does not set the default export
export * as name1 from …; // Draft ECMAScript® 2O21
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

在导出多个值时，命名导出非常有用。在导入期间，必须使用相应对象的相同名称。但是，可以使用任何名称导入默认导出，例如：

let k; export default k = 12; 
// 另一个文件
import m from './test'; // 由于 k 是默认导出，所以可以自由使用 import m 替代 import k
console.log(m);        // 输出为 12

着重注意以下几点：

在你的 HTML 中需要包含 type=“module” 的 <script 元素这样的脚本，以便它被识别为模块并正确处理（在浏览器中，import 语句只能在声明了 type=“module” 的 script 的标签中使用。）
不能通过 file:// URL 运行 JS 模块 — 这将导致 CORS 错误。你需要通过 HTTP 服务器运行。