关于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的用法和注意之处的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. ES6详解八:模块(Module)!--各种导入导出方法

    [-] 基本用法 命名导出named exports 默认导出 命名导出结合默认导出 仅支持静态导入导出 各种导入和导出方式总结   modules是ES6引入的最重要一个特性. 所以以后再写模块,直 ...

  7. Winform开发框架中的内容及文档管理模块功能介绍

    在开发项目的时候,我们有一些场景需要编辑一些HTML文档,作为内容发布系统的一部分,有时候也需要对一些文档如WORD文档进行编辑管理,这样需要我们对这些内容及文档进行合适的管理.本文主要介绍在WInf ...

  8. CommonJs/ES6/AMD模块的用法以及区别

    github地址: 一直以来对CommonJs/AMD/CMD/ES6的文件模块加载一直懵懵懂懂.甚至有时会将CommonJs的exports和ES6的export.default搞混.趁着学习web ...

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

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

随机推荐

  1. Openstack入门篇(十一)之neutron服务(控制节点)的部署与测试

    1.Neutron的介绍 Neutron 为整个 OpenStack 环境提供网络支持,包括二层交换,三层路由,负载均衡,防火墙和 *** 等.Neutron 提供了一个灵活的框架,通过配置,无论是开 ...

  2. 设计模式之module模式及其改进

    写在前面 编写易于维护的代码,其中最重要的方面就是能够找到代码中重复出现的主题并优化他们,这也是设计模式最有价值的地方 <head first设计模式>里有一篇文章,是说使用模式的心智, ...

  3. SpringBoot日记——日志框架篇

    在项目的开发中,日志是必不可少的一个记录事件的组件,所以也会相应的在项目中实现和构建我们所需要的日志框架. 而市面上常见的日志框架有很多,比如:JCL.SLF4J.Jboss-logging.jUL. ...

  4. 阿里云centos7.4安装并部署svn1.10.0版本(配置多仓库,加入开机自启动)

    如何安装最新版本 1.10.0: 如果已安装旧版本,先卸载 yum remove subversion* 查看当前可安装的版本 yum list | grep subversion 可以去官网下载安装 ...

  5. phpcms 容许英文目录有空格

    在PHPCMS添加栏目里面,有个选项是 英文目录,这里目录可以用作伪静态功能.这么英文不能有空格等特殊字符.但是如果页面中需要引用包含空格的字符呢,例如,关于我们页面,我要显示英文about us.那 ...

  6. 在HTML中引用JavaScript中的变量

    和上次的代码几乎一样,但这次是引用已经写好的变量.主要功能和用法如下: document对象的getElementId方法得到HTML元素. HTML元素的value属性可以用来设置变量的值. 02. ...

  7. 使用maven&&make-distribution.sh编译打包spark源码

    1>基础环境准备: jdk1.8.0_101 maven 3.3.9scala2.11.8 安装好上述软件,配置好环境变量,并检查是否生效. 2>配置maven:intellij idea ...

  8. FICO(费埃哲)评分系统有什么优缺点?在国内的发展怎么样?

    权威回答: FICO的优点很明显: 在美国数据库较全面.一般存储有最近7-10年的个人信用记录,包括银行信用.商业信用甚至保险等. 客观性.计算机自动完成评估工作,克服人为操作的失误. 快捷性.出结果 ...

  9. trustbox文件破解

    常见的破解方式,是要还原内容的二进制文件,删除加密壳部分的对应二进制数值,然后把剩下的内容保存下来,就实现了破解的任务.  淘宝破解链接:https://item.taobao.com/item.ht ...

  10. Java将json字符串转成map

    Map<String, Object> map = (Map<String, Object>) JSONUtils.parse(result)