export - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

The export statement is used when creating JavaScript modules to export functions, objects, or primitive values from the module so they can be used by other programs with the import statement.

Exported modules are in strict mode whether you declare them as such or not. The export statement cannot be used in embedded scripts.

Link to sectionSyntax

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
Identifier to be exported (so that it can be imported via import in another script).

Link to sectionDescription

There are two different types of export, named and default. You can have multiple named exports per module but only one default export. Each type corresponds to one of the above syntax:

  • Named exports:

    // exports a function declared earlier
    export { myFunction }; // exports a constant
    export const foo = Math.sqrt(2);
  • Default exports (function):
    export default function() {}
  • Default exports (class):
    export default class {}

Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.

But a default export can be imported with any name for example:

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

The following syntax does not export a default export from the imported module:

export * from …;

If you need to export the default, write the following instead:

export {default} from 'mod';

Link to sectionExamples

Link to sectionUsing named exports

In the module, we could use the following code:

// 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 };

This way, in another script, we could have:

//You should use this script in html with the type module ,
//eg ''<script type="module" src="demo.js"></script>",
//open the page in a httpserver,otherwise there will be a CORS policy error.
//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

Link to sectionUsing the default export

If we want to export a single value or to have a fallback value for our module, we could use a default export:

// module "my-module.js"
export default function cube(x) {
return x * x * x;
}

Then, in another script, it will be straightforward to import the default export:

import cube from 'my-module';
console.log(cube(3)); // 27

Note that it is not possible to use varlet or const with export default.

Link to sectionModule Redirects

If we want to export default, and star from another module (effectively creating a "redirect"):

// module "redirect-module.js"
export {default} from './other-module';
export * from './other-module';

Link to sectionSpecifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Exports' in that specification.
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Exports' in that specification.
Draft  

There are two different types of export, named and default的更多相关文章

  1. ES2015 import & export

    [ES2015 import] The import statement is used to import functions, objects or primitives that have be ...

  2. JavaScript export

    export The export statement is used when creating JavaScript modules to export functions, objects, o ...

  3. ES6 module export options 模块导出、导入语法

    http://stackoverflow.com/questions/25494365/es6-module-export-options A year and some later, here is ...

  4. [ES6] Export class and variable

    Export variable: export const MAX_USERS = 3; export const MAX_REPLIES = 3; Export default class: exp ...

  5. [转] ES6 import/export:模块导入导出方式

    export导出语法 // default exports export default 42; export default {}; export default []; export defaul ...

  6. Package template (html/template) ... Types HTML, JS, URL, and others from content.go can carry safe content that is exempted from escaping. ... (*Template) Funcs ..

    https://godoc.org/text/template GoDoc Home About Go: text/templateIndex | Examples | Files | Directo ...

  7. ES6新特性:使用export和import实现模块化

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工 ...

  8. 关于ES6的 模块功能 Module 中export import的用法和注意之处

    export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一个默认输出,因此export deault命令只能使用一次.所以,import命令后 ...

  9. export和import实现模块化

    export和import实现模块化 阅读目录 ES6的模块化的基本规则或特点: 下面列出几种import和export的基本语法: ES6导入的模块都是属于引用: 循环依赖的问题: 浏览器兼容: 参 ...

随机推荐

  1. Jmeter脚本两种录制方式

    Jmeter 是一个非常流行的性能测试工具,虽然与LoadRunner相比有很多不足,比如:它结果分析能力没有LoadRunner详细:很它的优点也有很多:   l       开源,他是一款开源的免 ...

  2. NOIP2016模拟赛三 Problem C: 不虚就是要AK

    题目大意 给定一棵带有边权的树, 问你在树上随机选两个点, 它们最短路径上的边权之和为\(4\)的倍数的概率为多少. Solution 树分治. 没什么好讲的. #include <cstdio ...

  3. 写在php设计模式前

    在学校写代码的时候,看过许多代码,跟着学长学过一段时间.找工作的时候由于种种原因,从事于本专业, 最近重拾php,充充电,找个好工作. 以前项目中设计模式用的比较多的也就是单例模式,看书中回顾写过的代 ...

  4. 使用 ODP.NET 访问 Oracle(.net如何访问Oracle)详解【转】

    http://www.cnblogs.com/qinpengming/archive/2013/06/08/3127346.html 1,什么是ODF .NE,?就是Oracle 为 .NET (OD ...

  5. 对ps4 cmask fmask的理解

    这俩都是绑在corlor target上8x8的格子 cmask 做fastclear 这个比较好理解,8x8来表示这个格子是否clear fmask msaa用 provided to suppor ...

  6. git错误解决 -- 小结

    1.今天 当我  执行  Git add  somefile 的时候,出现 如下 错误: If no other git process is currently running, this prob ...

  7. 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之静态页面

    一.引言 接着上一篇,京东个人中心的所有功能数据分析完成之后,现在需要把静态页面完成,实现过程中要用到的技术有:Bootstrap.html5表单新特性等.除此之外,还要利用Node.js的Expre ...

  8. 2016.7.12 针对不同的数据库类型generatorConfig文件中的数据库配置

    百度了很多资料,没有专门说这个的.大家都是配置自己的数据库,大部分是mysql.因为我使用的是postgresql,还是找了一会才找到配置指导. 毕竟第一次配置,还是要看着别人的指导比较安心.配置完后 ...

  9. POJ 3181 Dollar Dayz(全然背包+简单高精度加法)

    POJ 3181 Dollar Dayz(全然背包+简单高精度加法) id=3181">http://poj.org/problem?id=3181 题意: 给你K种硬币,每种硬币各自 ...

  10. Ajax学习(一)——与Ajax的初次相识

        AJAX是"Asynchronous Javascript And XML"的缩写,从字面上解释是"异步JavaScript和XML"的简称. 它不是一 ...