在创建JavaScript模块时,export
语句用于从模块中导出函数、对象或原始值,以便其他程序可以通过 import
语句使用它们。
无论您是否声明,导出的模块都处于严格模式
。 export语句不能用在嵌入式脚本中。
语法
// 导出单个特性 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 default expression; export default function (…) { … } // also class, function* export default function name1(…) { … } // also class, function* export { name1 as default, … }; // Aggregating modules export * from …; export { name1, name2, …, nameN } from …; export { import1 as name1, import2 as name2, …, nameN } from …; export { default } from …;
-
nameN
-
要导出的标识符(以便其他脚本通过
import
语句进行导入).
描述
有两种不同的导出方式,命名导出和默认导出。你能够在每一个模块中定义多个命名导出,但是只允许有一个默认导出。每种方式对应于上述的一种语法:
- 命名导出:
// 导出早前定义的函数 export { myFunction }; // 导出常量 export const foo = Math.sqrt(2);
- 默认导出(函数):
export default function() {}
- 默认导出(类):
export default class {}
在导出多个值时,命名导出非常有用。在导入期间,必须使用相应对象的相同名称。但是,可以使用任何名称导入默认导出,例如:
let k; export default k = 12; // 在 test.js文件中定义导出 import m from './test' // 由于k 是默认导出,所以可以自由使用import m 替代import k console.log(m); // 输出为 12
下面的语法不能从导入的模块导出默认导出值:
export * from …;
如果需要导出默认值,请使用下列代码:
export {default} from 'mod';
示例
使用命名导出
在模块中,我们可以使用以下代码:
// module "my-module.js" function cube(x) { return x * x * x; } const foo = Math.PI + Math.SQRT2; var graph = { options: { color:'white', thickness:'2px' }, draw: function() { console.log('From graph draw function'); } } export { cube, foo, graph };
这样的话,在其它脚本中,我们可以这样使用它:
// 在html中应使用带有module类型的script。 // 示例: // <script type="module" src="./demo.js"></script> // // 在http服务器上访问,否则将会有一个CORS保护报错。 // // script demo.js import { cube, foo, graph } from 'my-module.js'; graph.options = { color:'blue', thickness:'3px' }; graph.draw(); console.log(cube(3)); // 27 console.log(foo); // 4.555806215962888
使用默认导出
如果我们要导出一个值或模块中的返回值,就可以使用默认导出:
// module "my-module.js" export default function cube(x) { return x * x * x; }
然后,在另一个脚本中,可以直接导入默认导出:
// module "my-module.js" import cube from 'my-module.js'; console.log(cube(3)); // 27
注意,不能使用 var
、let
或 const
用于导出默认值 export default
。
模块重定向
如果我们想要在当前模块中,导出指定导入模块的默认导出(等于是创建了一个“重定向”):
// module "redirect-module.js" export {default} from './other-module'; export * from './other-module';
规范
规范 | 状态 | 备注 |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) Exports |
Standard | 初版 |
ECMAScript Latest Draft (ECMA-262) Exports |
Draft |
浏览器兼容性
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out
https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | Server | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
export |
Chrome Full support 61 | Edge Full support 16
|
Firefox Full support 60
|
IE No support No | Opera Full support 47 | Safari Full support 10.1 | WebView Android No support No | Chrome Android Full support 61 | Firefox Android Full support 60
|
Opera Android Full support 44 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 8.0 | nodejs ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- User must explicitly enable this feature.
- User must explicitly enable this feature.
参见
import
- ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
- ES modules: A cartoon deep-dive, Hacks blog post by Lin Clark
- Axel Rauschmayer's book: "Exploring JS: Modules"