(转)关于ES6的 模块功能 Module 中export import的用法和注意之处
关于ES6的 模块功能 Module 中export import的用法和注意之处
export default 的用法
export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export deault命令只能使用一次。所以,import命令后面才不用加大括号,相反其它的export 输出 可以有多个,且import时必须加大括号,示例如下:

1 // modules.js
2 function add(x, y) {
3 return x * y;
4 }
5 export {add as default};
6 // 等同于
7 // export default add;
8
9 // app.js
10 import { default as xxx } from 'modules';
11 // 等同于
12 // import xxx from 'modules';

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

1 // 正确
2 export var a = 1;
3
4 // 正确
5 var a = 1;
6 export default a; // 写法1
7 export {a} // 写法2
8
9 // 错误
10 export default var a = 1;

import 时候的路径问题(新手容易碰到)
开始玩的时候,总是出现 cannot find module 问题,原来 在 import 的时候 如果不使用相对路径或者绝对路径,node默认会去node_modules/文件夹下去找,例如:
1 import * as obj from 'exports'
2 // node 会试着去寻找 node_modules/exports.js 模块
3
4 // 正确写法
5 import * as obj from './exports'
关于 import * as obj from 'xx' 这种写法是把所有的输出包裹到obj对象里
对了,还有模块的继承写法:

1 // circle.js
2 export var a = 1;
3
4 // circleplus.js 当前模块继承了 circle 模块的所有输出
5 // 此处只是继承了输出,并不能直接使用
6
7 export * from 'circle';
8 export var e = 2.71828182846;
9 export default function(x) {
10 return Math.exp(x);
11 }
12
13 // 继承之后,circleplus.js 相当于下面代码
14 export var a = 1;
15 export var e = 2.71828182846;
16 export default function(x) {
17 return Math.exp(x);
18 }

(转)关于ES6的 模块功能 Module 中export import的用法和注意之处的更多相关文章
- 关于ES6的 模块功能 Module 中export import的用法和注意之处
export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一个默认输出,因此export deault命令只能使用一次.所以,import命令后 ...
- 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详解八:模块(Module)!--各种导入导出方法
[-] 基本用法 命名导出named exports 默认导出 命名导出结合默认导出 仅支持静态导入导出 各种导入和导出方式总结 modules是ES6引入的最重要一个特性. 所以以后再写模块,直 ...
- Winform开发框架中的内容及文档管理模块功能介绍
在开发项目的时候,我们有一些场景需要编辑一些HTML文档,作为内容发布系统的一部分,有时候也需要对一些文档如WORD文档进行编辑管理,这样需要我们对这些内容及文档进行合适的管理.本文主要介绍在WInf ...
- CommonJs/ES6/AMD模块的用法以及区别
github地址: 一直以来对CommonJs/AMD/CMD/ES6的文件模块加载一直懵懵懂懂.甚至有时会将CommonJs的exports和ES6的export.default搞混.趁着学习web ...
- ES6 模块的加载实现 import和export
ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题.Module功能就是为了解决这个问题而提出的. 历史上,JavaScript一直没有模块(m ...
随机推荐
- HDU - 5877 Weak Pair (dfs+树状数组)
题目链接:Weak Pair 题意: 给出一颗有根树,如果有一对u,v,如果满足u是v的父节点且vec[u]×vec[v]<=k,则称这对结点是虚弱的,问这棵树中有几对虚弱的结点. 题解: 刚开 ...
- C#时间间隔
System.Diagnostics.Stopwatch stopwatch = new System.Diagnostics.Stopwatch(); stopwatch.Start(); stop ...
- MVC Redirect 页面跳转不了
1:如果是AJAX调取后台控制器的方法,那么最后跳转的步骤应该在AJAX的success方法里面执行跳转 若果要在控制器跳转那么 应该是前端页面 进行表单提交 在控制器直接用 redire等跳转方法
- IIS 配置网站
IIS 配置网站最常见的问题 1 文件夹权限问题 (C盘 windows下temp文件夹权限问题)2 版本问题 (框架版本问题如4.0 在2.0下运行,4.5在4.0下运行) 3如果是局域网,考虑动态 ...
- SpringCloud 学习(二) :服务注册与发现Eureka
Spring Cloud应用中可以支持多种的服务治理框架,比如Eureka.Consul.Zookeeper等,现在我们用的是consul,本文以SpringCloud Dalston.SR5版本介绍 ...
- NO--19 微信小程序之scroll-view选项卡与跳转(二)
本篇为大家介绍为何我们在最后做交互的时候,并没有使用上一篇讲的选项卡的效果. scroll-view与跳转.gif (如无法查看图片,还请翻看上一篇!) 大家注意看,在我点击跳转后,首先能看到的是 ...
- Flink HA
standalone 模式的高可用 部署 flink 使用zookeeper协调多个运行的jobmanager,所以要启用flink HA 你需要把高可用模式设置成zookeeper,配置zookee ...
- VisionPro相机操作类
在网站上看到这个,保存下来,以后用到了,再看一下.谢谢原创的分享! #region 获得相机信息方法 /// <summary> /// 公有静态方法,查找单个相机.例如“Basler” ...
- c++虚继承与虚函数
学习继承与多态时看到这两个概念,记录整理. 虚继承与虚函数都是用virtual关键字实现,虚继承为了防止多重继承,而虚函数为了实现多态. 是几个例子. 虚继承: class A{}; class B: ...
- uiimageview 的 animation 动画
NSMutableArray *meiArr = [NSMutableArray arrayWithCapacity:4]; for (int i = 0; i < 4; i++) { NSSt ...