在创建JavaScript模块时,export 语句用于从模块中导出函数、对象或原始值,以便其他程序可以通过 import 语句使用它们。

无论您是否声明严格模式,导出的模块都处于严格模式。 export语句不能在嵌入式脚本中使用。

 

语法

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

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

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
nameN
要导出的标识符(以便被其他脚本通过 import 导入)

描述

有两种不同的导出方式,命名导出和默认导出。你能够在每一个模块中定义多个命名导出,但是只允许有一个默认导出。每种方式对应于上述的一种语法:

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

let k; export default k = 12; // in file test.js

import m from './test' // note that we have the freedom to use import m instead of import k, because k was default export

console.log(m);        // will log 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';
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';
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 Initial definition.
ECMAScript Latest Draft (ECMA-262)
Exports
Draft  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
exportChrome Full support 61Edge 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 NoOpera Full support 47Safari Full support 10.1WebView Android No support NoChrome Android Full support 61Edge Mobile Full support YesFirefox 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 47Safari iOS Full support 10.1Samsung Internet Android No support Nonodejs ?

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.

参见