先做个前提,新建三个模块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. Unity简单使用 Addressables远端打包流程

    跟着一步步操作即可 1.先打开一个unity项目 2.导入插件资源包地址,点击如图片所示 3.最后点击导入就行了也就是第三步 Install 4.这是在点击 Window 安装后Window/多了一个 ...

  2. 绕过登录的Cookie

    1.先通过代码把登录前后的cookie打印出来,代码如下: #登录之前打印Cookiecks = driver.get_cookie() for ck in cks: print(ck) # 睡10秒 ...

  3. Mac上好用的app们

    记录下自己在mac上用的一些很不错的app,大多免费. 排名随缘. 不定期更新. Amphetamine 来源 AppStore 说明 欢迎使用Amphetamine,一款为macOS打造的最棒的防睡 ...

  4. python接口测试常见问题。

    一.入参问题 1.body字段类型 1.如果数据是从excel提取的那么中文数据会提示错误. 解决方法# media_value['body'] = media_value['body'].encod ...

  5. Python170道面试题

    1. 谈谈对 Python 和其他语言的区别 答:Python 是一门语法简洁优美,功能强大无比,应用领域非常广泛,具有强大完备的第三方库,他是一门强类型的可移植.可扩展,可嵌入的解释型编程语言,属于 ...

  6. 如何使用使用Mysql中的慢查。

    在MySQL中可以使用慢查找出运行速度慢的SQL语句. 1.在MySQL命令行中查看慢查: show  variables  like '%query%' 如图 "ON" 表示慢查 ...

  7. JUC续

    设计模式,保护性暂停.解耦 生产者消费者模式 park.unpark 线程状态转换 锁超时 锁超时可以解决哲学家就餐问题 公平锁 条件变量 线程控制顺序

  8. Postman中添加多个Cookie

    在接口测试中,很多接口都是需要登录后才能获取到数据的.如何标识登录状态呢?有些app用token,有些app用Cookie.通过Fiddler抓包看到,我涯使用的是Cookie的方式,而且是有多个Co ...

  9. VsCode——修改左侧目录缩进

    https://code84.com/741691.html https://blog.csdn.net/qq812457115/article/details/124445657

  10. shell - scriptfifo

    shell1: mkfifo xxfifo script -f xxfifo cmd cmd exit   -----主动退出 shell2: cat xxfifo 可以看到shell1的所有操作. ...