(转)关于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 }

时间: 2024-11-05 14:38:07

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

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

import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程,再用一种简单的方法把这些小工程连接在一起. 这有可能导致两个问题: 一方面js代码变得很臃肿,难以维护 另一方面我们常常得很注意每个script标签在html中的位置,因为它们通常有依赖关系,顺序错了可能就会出bug 在es6之前为解决上面提到的问题,我们得利用第三方提供的一些方案,主要有两种

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

菜单快捷导航: CommonJS 之 exports和require用法 ES6 Module 之 export 和 import 用法 CommonJS和ES6 Module的区别 循环依赖 和 解决办法 模块打包原理简析 1.CommonJS 之 exports和require用法 CommoneJS规定每个文件是一个模块.将一个JavaScript文件直接通过script标签引入页面中,和封装成CommonJS模块最大的不同在于:前者的顶层作用域是全局作用域,在进行变量及函数声明时会污染全

彻底搞懂 module.exports/exports/import/export/export default

module.exports/exports module.exports 是模块系统创建的(全局内置对象):当你创建完成一个模块时,需要将此模块暴露出去,以便使用:module.exports 便提供了暴露出去的接口方法: 例如暴露出去一个对象(暴露一个全局变量或方法): /**创建模块 module.exports.js */ let object = { name: 'zhangsan', age: 24, hasSay: () => { console.info('This is zha

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

最近在学习使用Webpack3的时候发现,它已经可以在不使用babel的情况下使用ES6的模块加载功能了. 说到ES6的模块加载功能,我们先复习一下CommonJS规范吧: 一  . CommonJS规范规定,在每个模块内的module变量代表当前模块.这个变量的module.exports属性是对外开放的接口. 加载某个模块,其实是加载此模块的module.exports属性. exampleA.js var x = 5; var addX = function (value) { retur

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

在开发项目的时候,我们有一些场景需要编辑一些HTML文档,作为内容发布系统的一部分,有时候也需要对一些文档如WORD文档进行编辑管理,这样需要我们对这些内容及文档进行合适的管理.本文主要介绍在WInform项目中利用ZetaHtmlEditControl进行HTML内容管理,以及利用TX TextControl控件进行WORD文档管理,这两方面都是我们一般进行内容和文档管理所必须的. 1.内容及文档管理模块功能介绍 整个模块,支持WInform框架和混合式开发框架两种模式,都是基于WInform

理解ES6的模块(Understanding ES6 Modules)

理解ES6的Modules 原文出处: Understanding ES6 Modules. 基础(Basic) 在ES6中,每个模块的都是定义在它自己的文件中.在模块中定义的变量或者是函数在外部都是不可见的, 除非你显示的使用export来导出它们. 这意味着你可以在你的模块中编写代码, 然后只导出那些需要被其他部分可以访问的部分几个. ES6模块是使用原生的定义方式进行定义的. 如果想从一个模块中导出某个变量, 只需要使用关键词export. 相似的, 如果想要使用来自另外一个模块中的变量,

JavaScript基础对象创建模式之模块模式(Module Pattern)(025)

模块模式可以提供软件架构,为不断增长的代码提供组织形式.JavaScript没有提供package的语言表示,但我们可以通过模块模式来分解并组织 代码块,这些黑盒的代码块内的功能可以根据不断变化的软件需求而不断的被添加,替代和删除.模块模式由几种我们已经介绍过的模式共同组成: 命名空间模式 即时函数模式 私有成员与访问控制方法模式 依赖声明模式 模块模式的第一步是建立一个命名空间.首先我们用先前介绍的namespace()方法创建一个工具模块例子,这个例子模块提供一些数组功能: MYAPP.na

ES6 的模块系统

此文为翻译,原文地址在这儿:https://hacks.mozilla.org/2015/08/es6-in-depth-modules/[转] ES6 是 ECMAScript 第 6 版本的简称,这是新一代的 JavaScript 的标准.ES6 in Depth 是关于 ES6 的一系列新特性的介绍. 遥想 2007 年,笔者开始在 Mozilla 的 JavaScript 团队工作的时候,那个时候典型的 JavaScript 程序只有一行代码. 两年之后, Google Map 被发布.

ES6中export与export default的区别

首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块.也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件).这几个都是ES6的语法. export与export default 1.export与export default均可用