关于ES6的 模块功能 Module 中export import的用法和注意之处
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的用法和注意之处的更多相关文章
- (转)关于ES6的 模块功能 Module 中export import的用法和注意之处
关于ES6的 模块功能 Module 中export import的用法和注意之处 export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一 ...
- export import 的用法和注意之处
1.整体引入: 会将若干export导出的内容组合成一个对象返回: import *as api from utils.https; api为自定义名称,可直接指定此文件中的某个方法,uti ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- 在浏览器中使用ES6的模块功能 import 及 export
感谢英文原作者 Jake Archibald 的技术分享 各个浏览器对于ES6模块 import . export的支持情况 Safari 10.1. Chrome 61. Firefox 54 – ...
- 探索 模块打包 exports和require 与 export和import 的用法和区别
菜单快捷导航: CommonJS 之 exports和require用法 ES6 Module 之 export 和 import 用法 CommonJS和ES6 Module的区别 循环依赖 和 解 ...
- ES6中export , export default , import模块系统总结
最近在学习使用Webpack3的时候发现,它已经可以在不使用babel的情况下使用ES6的模块加载功能了. 说到ES6的模块加载功能,我们先复习一下CommonJS规范吧: 一 . CommonJS ...
- ES6 模块的加载实现 import和export
ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题.Module功能就是为了解决这个问题而提出的. 历史上,JavaScript一直没有模块(m ...
- JavaScript ES6中export、import与export default的用法和区别
前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...
- ES6中export与export default的区别
首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口i ...
随机推荐
- 什么是Ajax?
1. 什么是Ajax?Asynchronous JavaScript and XML(异步的Javascript和XML),它不是某种编程语言,而是一种在无需刷新整个网页的情况下能够更新部分网页的技术 ...
- js的三种继承方式及其优缺点
[转] 第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = ' ...
- js-倒计时自动隐藏
<!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
- *HDU3367 最小生成树
Pseudoforest Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tot ...
- ArcEngine 岛状多边形内部环的获取
ArcEngine岛状多边形获取其内部环 查阅了帮助文档相关接口,内部环的获方法get_InteriorRingBag() 需要外部环作为参数.而外部环可以直接通过ExteriorRingBag属性获 ...
- Javascript初学篇章_3(注释/if/switch)
五.javascript的注释 // 单行注释 /* …*/ 多行注释 注:多行注释不能互相嵌套 六.程序流程控制 一.条件语句 if 语法: if(condition) statements1 el ...
- antmate.css
本文各式各样的动画来源于http://daneden.github.io/animate.css/ ,若想看效果可复制运行下文,或到该网站自行查阅. <!DOCTYPE html> < ...
- 安卓中級教程(9):pathbutton中的animation.java研究(2)
src/geniuz/myPathbutton/composerLayout.java package geniuz.myPathbutton; import com.nineoldandroids. ...
- 在Windows 10下启用旧的照片查看器
从Windows 10开始,默认只能通过“照片”来查看图片了,非常不方便!通过将下列文本保存在.reg文件后导入,即可找回Windows XP时代的“照片查看器”. Windows Registry ...
- mango框架中表分片与数据库分片(分表与分库)
表分片 表分片通常也被称为分表,散表. 当某张表的数据量很大时,sql执行效率都会变低,这时通常会把大表拆分成多个小表,以提高sql执行效率. 我们将这种大表拆分成多个小表的策略称之为表分片. 先来看 ...