ES6模块之export和import详解

转载 2017年07月22日 15:45:27

ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它。ES6的模块系统大致分为导出(export)和导入(import)两个模块。

1、模块导出(export)

你可以导出所有的最外层函数以及varletconst声明的变量。
ES6模块只支持静态导入和导出,你只可以在模块的最外层作用域使用importexport,不可在条件语句中使用,也不能在函数作用域中使用import所有导出的标识符一定要在源代码中明确地导出它们的名称,你不能通过编写代码遍历一个数组然后用数据驱动的方式导出一堆名称。如下导出是错误的。
function squre() {};
if(true) {
	export {squre};
}

ES6的导出分为名字导出和默认导出

1、名字导出(name export)

名字导出可以在模块中导出多个声明。
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
	return x * x;
}
export function add (x, y) {
	return x + y;
}

//------ main.js ------
import { square, add } from 'lib';
console.log(square(10)); //100
console.log(add(2,4));  //6
这样导入的变量名必须和导出的名称一致。以上对于每一个要导出的变量都加了export,我们也可以直接导出一个列表,例如上面的lib.js可以改写成:
//------ lib.js ------
const sqrt = Math.sqrt;
function square(x) {
	return x * x;
}
function add (x, y) {
	return x + y;
}
export {sqrt, square, add}
export列表可以在模块文件最外层作用域的每一处声明,不一定非要把它放在模块文件的末尾。

也可以直接导入整个模块,此时的main.js模块将变成这样。
//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(10)); //100
console.log(lib.add(2,4));  //6

2、默认导出(default export)

一个模块只能有一个默认导出,对于默认导出,导入的名称可以和导出的名称不一致,这对于导出匿名函数或类非常有用。
//------ myFunc.js ------
export default function() {...};

//------ main.js ------
import myFunc from 'myFunc';
myFunc();
注意这里默认导出不需要用{}。
当然也可以使用混合的导出。
//------ lib.js ------
export default function() {...};
export function each() {...};

//------ main.js ------
import _,{ each } from 'lib';

2、重命名export和import

为了解决导出命名冲突的问题,ES6为你提供了重命名的方法解决这个问题,当你在导入名称时可以这样做:
// 这两个模块都会导出以`flip`命名的东西。
// 要同时导入两者,我们至少要将其中一个的名称改掉。
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";
同样,当你在导出的时候也可以重命名。你可能会想用两个不同的名称导出相同的值,这样的情况偶尔也会遇到:
function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};
对于默认导出,只是导出了一个特殊的名字叫 default,你也可以就直接用他的名字,把它当做命名导出来用,下面两种写法是等价的:
import { default as foo } from 'lib';
import foo from 'lib';
也可以把名称as为default来默认导出:
 //------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };

3、作为中转模块导出

有时候为了避免上层模块导入太多的模块,我们可能使用底层模块作为中转,直接导出另一个模块的内容如下:
//------ myFunc.js ------
export default function() {...};

//------ lib.js ------
export * from 'myFunc';
export function each() {...};

//------ main.js ------
import myFunc,{ each } from 'lib';

这样main.js只需导入lib模块即可,虽然myFunc模块从lib模块导出,但是lib却不能使用myFunc模块的内容。


参考链接:





相关文章推荐

ES6学习——模块化:import和export

关于JS模块化的使用,大家肯定不默认,现有的主要有两种CMD和AMD,还有一种兼容CMD和AMD写法的UMD。一般前端框架都支持AMD,而node.js采用的是CMD的模块语法。 ES6中规范化了模块...
  • kittyjie
  • kittyjie
  • 2016年02月07日 15:35
  • 18056

JavaScript ES6中export及export default的区别

在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过`import+(常量 | 函数 | 文件 | 模块)名`...

ES6 export的常用用法

es6 export import

es6 import & export

前言:ES6把js文件当做模块处理 一、export & import 示例1: 导出一个变量//test.js var name = "Amy"; export {name};//写法2 (注...

ES6 模块化(Module)export和import详解

转载请注明预见才能遇见的博客:http://my.csdn.net/ 原文地址: ES6 模块化(Module)export和import详解 ES6 在语言标准的层面上,实现了模块功能,而且实现得相...
  • pcaxb
  • pcaxb
  • 2016年12月15日 14:48
  • 6594

ES6详解八:模块(Module)!

modules是ES6引入的最重要一个特性。 所以以后再写模块,直接按照ES6的modules语法来写,然后用 babel + browserify 来打包就行了。modules规范分两部分,一部分...

ES6 export & import的基本用法

模块功能主要由两个命令组成:export & import。 export用于规定模块的对外接口。 import用来引入其他模块提供的功能。 1. export 输出模块内的变量: export va...

!如何让es6 写的 文件 import 起来

这段时间,学习了一点关于es6新规范的知识,然后心血来潮,想尝试一下用ES6编写的代码在浏览器中跑起来。 说干就干,先说下我的实现步骤(没想到有坑!) 把ES6代码转译成ES5;html文...

ES6 import 引用文件夹/目录

看redux的时候发现官网的教程里直接import了一个文件夹,我再三确定我没有看错, 是一个 文件夹 (Directory), 它直接 import了一个目录! 这个 文件夹/目录底下还有一个i...

Es6 中 export和import详解

模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。 一个模块就是一个独立的文件。该文件内部的所有变量,外...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ES6模块之export和import详解
举报原因:
原因补充:

(最多只允许输入30个字)