export

在创建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​​​​​

注意,不能使用 varletconst 用于导出默认值 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

浏览器兼容性

Update compatibility data on GitHub
Desktop Mobile Server
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js
export Chrome Full support 61 Edge Full support 16
Full support 16
Full support 15
Disabled
Disabled From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
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
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
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.

参见