先做个前提,新建三个模块JS文件m1,m2,m3,其中m1.js 为分别暴露,m2.js 为统一暴露,m3.js 为默认暴露。接下来进行文件的import引入

1.通用的引入方式,这种方式适合任何暴露方式的引入
1         import * as m1 from './modulesJs/m1.js'
2 import * as m2 from './modulesJs/m2.js'
3 import * as m3 from './modulesJs/m3.js'

只不过调用的时候,默认暴露的m3.js对应引入的m3在调用属性方法的时候多一个default节点。假如调用m3中的say()方法,需要这样去调用 m3.default.say()

2.解构赋值的方式进行引入
 1         // 分别暴露和统一暴露的引入方式没有差异:
2 import {team,play} from './modulesJs/m1.js'
3 play() // this is a team of LPL
4 import { name, dis as d } from './modulesJs/m2.js'
5 d() // we are the champion
6
7 // 默认暴露的解构赋值引入有一定差异,如下
8 import { default as m3 } from './modulesJs/m3.js' // 此处的default 不能够单独使用,需要取别名
9 // 这样引入的方式在调用的时候就没有多default节点了,可以直接进行对象属性的调用
10 m3.say() // it is a good team
3.简便形式 只针对默认暴露
  1 import m3 from './modulesJs/m3.js'
 2 m3.say() // 同样也可以直接进行调用 输出结果:it is a good team 

ES6的模块化(import引入)的更多相关文章

  1. 模块化开发 | es6模块暴露与引入

    CommonJS模块开发 CommonJS定义 每个文件就一个模块,有自己的作用域.在一个文件里面定义的变量.函数.类,都是私有的,对其他文件不可见. 私有作用域不会污染全局作用域. 模块可加载多次, ...

  2. es6的模块化编程

    es6的模块化编程 基本用法 es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能. 一个模块就是一个独 ...

  3. ES6学习笔记(二)—— 通过ES6 Module看import和require区别

    前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...

  4. 通过ES6 Module看import和require区别

    前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...

  5. main.js中import引入css与引入js的区别

    表现:引入css样式文件能够作用到全局,而引入js文件就只能在main.js中产生作用 在 main.js 中引入的 css 都是全局生效的.引入的 js 文件只在 main.js 中生效,是因为 m ...

  6. ES6 模块export import

    在 ES6 前, 实现模块化使用的是 RequireJS 或者 seaJS(分别是基于 AMD 规范的模块化库, 和基于 CMD 规范的模块化库).ES6 引入了模块化,其设计思想是在编译时就能确定模 ...

  7. [译]使用6to5,让今天就来写ES6的模块化开发!

    http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...

  8. 使用6to5,让今天就来写ES6的模块化开发!

    http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...

  9. ES6的模块化

    在之前的 javascript 中一直是没有模块系统的,前辈们为了解决这些问题,提出了各种规范, 最主要的有CommonJS和AMD两种.前者用于服务器,后者用于浏览器.而 ES6 中提供了简单的模块 ...

  10. 没有用到React,为什么我需要import引入React?

    没有用到React,为什么我需要import引入React? 本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖. 所以 ...

随机推荐

  1. css你所不知道技巧

    利用属性选择器来选择空链接 当 <a> 元素没有文本内容,但有 href 属性的时候,显示它的 href 属性: a[href^="http"]:empty::befo ...

  2. 再识redis-2

    Redis初识 特点关键字: 高性能Key-Value服务器 ops能达到十万级别 每秒能执行约11万集合 每秒约81000-条记录 主要数据结构 列表 集合 有序集合 散列(别名哈希 Redis的哈 ...

  3. 雪花算法-Java分布式系统自增id

    1.雪花算法的用途 分布式系统中ID生成方案,比较简单的是UUID(Universally Unique Identifier,通用唯一识别码),但是其存在两个明显的弊端: 一.UUID是128位的, ...

  4. 08.JSP技术

    一.什么是JSP JSP(Java Server Pages)是JavaWeb服务器端的动态资源.它与html页面的作用是相同的,显示数据和获取数据.JSP文件的扩展名是.jsp. JSP = htm ...

  5. eval()

    s='12*2'd=eval(s)#字符串运算函数print(d) 结果: 24

  6. const char* str和const char str[]的区别

    首先,字符串常量是存储在flash中的.假设字符串常量在flash中的地址是0x8003fb8. 第一种方式,str等价于str的内存单元的地址,str的内存单元存储着字符串常量的地址 第二种方式,s ...

  7. VS code 安装后gdb调试无法显示STL内容的问题

    bar {...} std::_Vector_base<TSample<MyTraits>, std::allocator<TSample<MyTraits> &g ...

  8. STM32F0使用LL库实现UART接收

    初始化: 1 void MX_USART1_UART_Init(void) 2 { 3 4 /* USER CODE BEGIN USART1_Init 0 */ 5 6 /* USER CODE E ...

  9. mysql 获取某个时间段内每天的数据

    SELECT dayTb.cday '日期' ,IFNULL(tNumTb.num,0) '订单数' FROM ( SELECT @cdate := DATE_ADD(@cdate, INTERVAL ...

  10. DUBBO消费端Reference初始化

    1. ReferenceBean.java ReferenceBean.java 继承 ReferenceConfig.java, 主要的Reference初始化逻辑都在ReferenceBean的g ...