export default 的用法

export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export deault命令只能使用一次。所以,import命令后面才不用加大括号,相反其它的export 输出 可以有多个,且import时必须加大括号,示例如下:

 // modules.js
function add(x, y) {
return x * y;
}
export {add as default};
// 等同于
// export default add; // app.js
import { default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';

正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句,而export需要跟变量声明或者大括号作为输出:

 // 正确
export var a = 1; // 正确
var a = 1;
export default a;  // 写法1
export {a}  // 写法2 // 错误
export default var a = 1;

import 时候的路径问题(新手容易碰到)

开始玩的时候,总是出现 cannot find module 问题,原来 在 import 的时候 如果不使用相对路径或者绝对路径,node默认会去node_modules/文件夹下去找,例如:

 import * as obj from 'exports'
// node 会试着去寻找 node_modules/exports.js 模块 // 正确写法
import * as obj from './exports'

关于 import * as obj from 'xx'  这种写法是把所有的输出包裹到obj对象里

对了,还有模块的继承写法:

 // circle.js
export var a = 1; // circleplus.js 当前模块继承了 circle 模块的所有输出
// 此处只是继承了输出,并不能直接使用 export * from 'circle';
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
} // 继承之后,circleplus.js 相当于下面代码
export var a = 1;
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}

关于ES6的 模块功能 Module 中export import的用法和注意之处的更多相关文章

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

    关于ES6的 模块功能 Module 中export import的用法和注意之处 export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一 ...

  2. export import 的用法和注意之处

       1.整体引入: 会将若干export导出的内容组合成一个对象返回: import *as  api from  utils.https; api为自定义名称,可直接指定此文件中的某个方法,uti ...

  3. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  4. 在浏览器中使用ES6的模块功能 import 及 export

    感谢英文原作者 Jake Archibald 的技术分享 各个浏览器对于ES6模块 import . export的支持情况 Safari 10.1. Chrome 61. Firefox 54 – ...

  5. 探索 模块打包 exports和require 与 export和import 的用法和区别

    菜单快捷导航: CommonJS 之 exports和require用法 ES6 Module 之 export 和 import 用法 CommonJS和ES6 Module的区别 循环依赖 和 解 ...

  6. ES6中export , export default , import模块系统总结

    最近在学习使用Webpack3的时候发现,它已经可以在不使用babel的情况下使用ES6的模块加载功能了. 说到ES6的模块加载功能,我们先复习一下CommonJS规范吧: 一  . CommonJS ...

  7. ES6 模块的加载实现 import和export

    ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题.Module功能就是为了解决这个问题而提出的. 历史上,JavaScript一直没有模块(m ...

  8. JavaScript ES6中export、import与export default的用法和区别

    前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...

  9. ES6中export与export default的区别

    首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口i ...

随机推荐

  1. React native 的弹出层(输入)效果

    /*弹出层测试*/ import React,{Component} from 'react'; import { StyleSheet, View, Image, Text, TouchableOp ...

  2. 07@Pattern_Note_命令模式

    前言 20160109: 今天开始看命令模式,主要从概念和实现来深入理解该模式 概念理解[部分来自摘录] 概念 通常来说,"行为请求者"与"行为实现者"是紧耦合 ...

  3. 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

    目   录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...

  4. requestAnimationFrame与setInterval,setTimeout

    自打学习canvas动画以来,都说requestAnimationFrame好,就一直用,也没觉得有什么太过于特殊的地方,直到刚才,在写完前面的"小球碰撞墙壁----干掉误差"之后 ...

  5. .net core 1.0 中的asp.net identity 的基本使用 序言

    2016年6月底,微软发不了vs2015 up3,在这个版本中,微软做了一些改变,本人目前也尚在学习使用之中,现把学习和使用的心得写出来,错误之处请大家指正. 开发环境:vs2015 UP3   项目 ...

  6. C# 方法返回值的个数

    方法返回值类型总的来说分为值类型,引用类型,Void 有些方法显示的标出返回值 public int Add(int a,int b) { return a+b; } 有些方法隐式的返回返回值,我们可 ...

  7. PhpStorm 10 破解方法

    最新版PhpStorm 10正式版改进了PHP 7支持,改进代码完成功能. PhpStorm 是最好的PHP开发工具,使用它进行PHP开发将会让你感觉到编程的乐趣. 快乐无极终于从oschina看到了 ...

  8. 从偶然的机会发现一个mysql特性到wooyun waf绕过题

    从偶然的机会发现一个mysql特性到wooyun waf绕过题 MayIKissYou | 2015-06-19 12:00 最近在测试的时候,偶然的机会发现了一个mysql的特性, 为啥是偶然的机会 ...

  9. iOS开发masonry的一些使用简介

    从一开始的纯代码计算frame,虽然自认为计算frame 刚刚的,但是到后来还是开始xib的自动约束和手动约束与frame搭配使用,经历这几种方式,大概一年前开始普遍使用masonry来代码约束之后也 ...

  10. gitlab改用ssh操作

    1.配置ssh http://blog.csdn.net/xyzchenxiaolin/article/details/51853319http://blog.csdn.net/r8hzgemq/ar ...