JavaScript 中 export 声明的变量怎么使用-js教程-PHP中文网

在 javascript 中，使用 export 声明的变量需要通过 import 语句导入到目标模块中才能访问。具体做法是在源文件中用 export const 或 export default 导出变量，然后在目标文件顶部通过 import { variablename } from './source' 语法引入，即可在当前作用域直接使用。

JavaScript 中 export 声明的变量怎么使用

`named export` 与 `default export` 的区别是什么

命名导出（Named Export）允许一个模块导出多个变量，导入时必须使用与原变量名完全一致的名称；默认导出（Default Export）只允许一个模块导出一个值，导入时可以使用任意名称。两者不能混用，且命名导出支持解构赋值，而默认导出通常直接绑定到一个标识符上。

JavaScript 中 export 声明的变量怎么使用

const PI = 3.14159;
const E = 2.71828;

export { PI, E };

export default function getSum(a, b) {
    return a + b;
}

上述代码定义了两个常量并作为命名导出，同时导出了一个函数作为默认导出。在使用时，可以这样导入：

import getSum, { PI, E } from './constants.js';

console.log(getSum(PI, E)); // 输出: 5.85979

这里 getSum 是默认导出的函数，PI 和 E 是命名导出的常量。如果尝试交换导入顺序或使用错误的名称，将导致引用错误。

如何动态导入 `export` 的变量

动态导入（Dynamic Import）使用 import() 函数返回一个 Promise，适用于按需加载模块或条件加载场景。它可以在任何地方调用，而不必像静态导入那样必须在模块顶层。这种方式对于减少初始加载体积非常有效。

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

JavaScript 中 export 声明的变量怎么使用

async function loadModule() {
    try {
        const module = await import('./module.js');
        console.log(module.default);
        console.log(module.namedExport);
    } catch (error) {
        console.error('Failed to load module:', error);
    }
}

loadModule();

在这个例子中，import() 返回的模块对象包含所有导出的内容。如果模块不存在或加载失败，会进入 catch 块。这种机制允许在运行时决定加载哪个模块，提供了极大的灵活性。