在创建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
导入)有两种不同的导出方式,命名导出和默认导出。你能够在每一个模块中定义多个命名导出,但是只允许有一个默认导出。每种方式对应于上述的一种语法:
// exports a function declared earlier
export { myFunction };
// exports a constant
export const foo = Math.sqrt(2);
export default function() {}
export default class {}
在导出多个值时,命名导出非常有用。在导入期间,必须使用相应对象的相同名称。但是,可以使用任何名称导入默认导出,例如:
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
注意,不能使用 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 | Initial definition. |
ECMAScript Latest Draft (ECMA-262) Exports |
Draft |
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 | Edge Mobile Full support Yes | Firefox Android
Full support
60
| Opera Android Full support 47 | Safari iOS Full support 10.1 | Samsung Internet Android No support No | nodejs ? |
import