ES6之Module 的加载实现(2)

3.Node 加载

Node 对 ES6 模块的处理比较麻烦,因为它有自己的 CommonJS 模块格式,与 ES6 模块格式是不兼容的。目前的解决方案是,将两者分开,ES6 模块和 CommonJS 采用各自的加载方案

3.1在静态分析阶段,一个模块脚本只要有一行import或export语句,Node 就会认为该脚本为 ES6 模块,否则就为 CommonJS 模块。如果不输出任何接口,但是希望被 Node 认为是 ES6 模块,可以在脚本中加一行语句

这里写图片描述

上面的命令并不是输出一个空对象,而是不输出任何接口的 ES6 标准写法

3.2import 命令加载 CommonJS 模块

Node 采用 CommonJS 模块格式,模块的输出都定义在module.exports这个属性上面。在 Node 环境中,使用import命令加载 CommonJS 模块,Node 会自动将module.exports属性,当作模块的默认输出,即等同于export default

这里写图片描述

import命令加载上面的模块,module.exports会被视为默认输出
这里写图片描述

如果采用整体输入的写法(import * as xxx from someModule),default会取代module.exports,作为输入的接口直接赋予在对象上成为属性**

这里写图片描述

上面代码中需要注意的是,整体的输出,Node 会自动为baz添加default属性,通过baz.default才能拿到module.exports

这里写图片描述

bar本身是一个对象,不能当作函数调用,只能通过bar.default调用

CommonJS 模块的输出缓存机制,在 ES6 加载方式下依然有效
这里写图片描述
即,CommonJS输出缓存的机制导致即使通过import加载了foo.js文件,得到的结果依然是缓存里的123

由于 ES6 模块是编译时通过export确定输出接口,而CommonJS 模块是运行时确定输出接口,所以采用import命令加载 CommonJS 模块时,不允许采用下面的写法(不要添加大括号,因为等价于输出的是export default)
这里写图片描述
上面的写法不正确,因为fs的书写是 CommonJS 格式的,只有在运行时才能确定readfile接口,而import命令要求编译时就确定这个接口。解决方法就是改为整体输入

这里写图片描述
这里的’express’就没有出现大括号的形式

3.3require 命令加载 ES6 模块

采用require命令加载 ES6 模块时,ES6 模块的所有输出接口,会成为输入对象的属性
这里写图片描述

上面代码中,ES6模块的default接口变成了通过require产生的es_namespace.default对象的属性。另外,由于CommonJS的输出缓存机制,所以es.js在已经输出foo后再对foo的重新赋值没有在模块外部反映出来

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407542.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASP.NET+AJAX简单的文体编辑器

前言: 这里一个基于AJAX的简单的文体编辑器,主要是利用了AJAX不刷新这个来做,功能上很简单没有什么技术性的东西在里, 在这里希望能够初学习一点帮助,同时也我自己也提高和巩固了以前学过的东西;目录: 运行结果浏览 代码讲解…

ES6之Module 的加载实现(3)

4.循环加载 “循环加载”(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本 通常,“循环加载”表示存在强耦合,如果处理不好,还可能导致递归加载,使得程…

oracle存储过程写法(一)

Create or Replace Procedure Proc_AppendRecords(nAppendCount int -- 要添加的记录条数)asbegindeclarenstart int;nend int;beginselect NVL(max(UserID),0) into nstart from T_Test_Checkbill;nend : nstart nAppendCount;while nstart < …

Vue之重命名组件

因为header本身是关键字&#xff0c;所以这里通过重命名的方式改为’v-header’

Struts2学习笔记1

一&#xff0e;下载struts2.0.1 http://struts.apache.org/downloads.html&#xff0c;下载struts-2.0.1-all.zip&#xff0c;这个压缩包中包括了开发struts2所需的struts2-core.jar核心包以及其他struts2所依赖的JAR文件&#xff0c;另外另一些struts2的演示样例程序以及一些H…

Vue路径的别名

这里给’components’赋予了一个地址&#xff0c;那么在程序中引入路径的时候’components’就直接可以代替路径’../src/components’

简单的单级下拉菜单实现

这里用纯CSS实现一个简单的单级下拉菜单&#xff0c;鼠标划过菜单标题时显示下拉菜单。 基本思路 在菜单处于光标之下时显示菜单&#xff0c;其余时候隐藏。这个过程首先得想到 :hover 伪类来实现&#xff0c;但是直接的利用伪类还不行&#xff0c;因为普通状态下菜单隐藏了&am…

C#里面的继承

举个例子&#xff1a;有一个基类RectangleEx1 classRectangleEx2 {3 privateint_x, _y, _w, _h;4 5 publicintx6 {7 get{ return_x; }8 set{ _x value; }9 }10 publicinty11 {12 get{ return_y; }13 set{ _y value; }14 }15 publicintw16 {17 get{ return_w; }18 set{ _w value…

Vue-Router的路由实例构造配置

可以通过在创建路由实例的时候传入不同的对象来选择不同的配置&#xff0c;这里的’linkActiveClass’代表的是给被激活的<router-link>添加一个叫做’active’的类名&#xff0c;然后我们就可以在css中给被激活标签设置不同的CSS了 其余的还有

WinForm UI设计与开发思路(转)

最近一年来一直在做WinForm相关的系统&#xff0c;对WinForm的UI设计有一些想法想和大家讨论&#xff08;主要是比较忙&#xff0c;所以很多只是设想&#xff0c;还没有开发实例&#xff09; 关于WinUI&#xff0c;理想的情形应该是外观比较cool&#xff0c;能给用户良好的使用…

Vue之父组件向子组件传递数据

1.创建子组件&#xff0c;在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props&#xff0c;然后创建一个名为message的属性 3.在App.vue中注册Child组件&#xff0c;并在template中加入child标签&#xff0c;标签中添加message属性并赋值 4.我们依然可以对m…

Vue之实例的生命周期

Vue实例有一个完整的生命周期&#xff0c;也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程&#xff0c;我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程&#xff0c;就是生命周期 在Vue的整个生命周期中&#xff0c;它提…

windows遍历目录下所有文件

From: http://blog.csdn.net/benbon/article/details/1911230 在windows中遍历目录下的所有文件主要是使用FindFirstFile和FindNextFile通过递归调用实现的,类似于Linux的opendir和readdir。 在MSDN中&#xff0c;FindFirstFile的声明如下&#xff1a; HANDLE FindFirstFile( …