当前位置：首页 > news >正文

前端模块导入导出方式

news 2025/8/5 22:29:11

不同的导出方式和相应的导入方式，可以提炼成 3 种类型：name、default 和 list。

以下是使用示例：

// Name Export | Name Import
// 一个“命名”的导出
export const name = 'value'
import { name } from '...'❌ 错误示例：
export 'value'
import { } //错误：没有名字***************************************************************
// 混合默认值 + 名称
// 您绝对可以将默认和名称导出合并到一个文件中
export const name = 'value';
export default 'value'
import anyName, { name } from 'some-path/file';***************************************************************
// Default Export | Default Import
// 使用默认导出时，您不需要任何名称。因为你可以随心所欲地命名它
export default 'value'
import anyName from '...'❌ 错误示例：
export default const name = 'value';  //错误：无默认变量声明***************************************************************
// Rename Export | NameImport
// 重命名导出
const name = 'value'
export { name as newName }
import { newName } from '...'
console.log(newName); // 'value'
console.log(name ); // undefined❌ 错误示例：无法将内联导出与导出列表组合在一起
export const name = 'value';
// You're already exporting name ☝️, don't export me again
export {name
}***************************************************************
// Name + Default | Import All
// 全部导入
export const name = 'value'
export default 'value'
import * as anyName from '...'
console.log(anyName.name); // 'value'
console.log(anyName.default); // 'defaultValue'***************************************************************
// Export List + Rename | Import List + Rename
// 导出列表
// 重命名导入
export {name1,name2 as newName2  
}
import {name1 as newName1,  //重命名导入newName2
} from '...'❌ 错误示例：
// Export list ≠ Object
export {name: 'name'
}