先做个前提,新建三个模块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. ubuntu16.04编译LAPACK3.7.1出错

    NEP: Testing Nonsymmetric Eigenvalue Problem routines ./EIG/xeigtstz < nep.in > znep.out 2> ...

  2. starlette.routing.NoMatchFound

    目前正在学习FastAPI, 目前是学习到了引入静态文件.这是我引入的本地文件的方式 url_for('/static', path='/imgs/favicon.ico') 只要启动服务,就会报错5 ...

  3. 性能测试-top-实时显示系统中各个进程的资源占用状况, 也可以查看线程

    1.top命令介绍 top命令是Linux系统中常用的性能分析工具,可以实时地查看系统的运行情况,比如内存.CPU.负载以及各个进程的资源占用情况 top界面主要分为两个部分,前5行展示的是系统的整体 ...

  4. Python学习笔记(二)变量的使用

    一.变量的定义 把程序运算的中间结果临时存到内存里,以备后面的代码继续调用,这几个名字的学名就叫做"变量" 可以把变量看做保存信息的容器,它们的目的是在内存中标注和存储数据,然后可 ...

  5. uniapp引入腾讯云直播助手插件

    在uniapp开发小程序,引入腾讯云直播助手插件 1.在manifest.json文件中,找到微信小程序特有相关,声明要使用的插件 /* 小程序特有相关 */ "mp-weixin" ...

  6. nodejs配合jwt

    使用npm下载包: npm i jsonwebtoken --save 引入此包: const jsonwebtoken =require('jsonwebtoken'); JWT的组成: JWT由三 ...

  7. 查找大文件-清理linux磁盘

    https://www.cnblogs.com/kerrycode/p/4391859.html find . -type f -size +800M  -print0 | xargs -0 du - ...

  8. RabbitMQ 修改密码

    C:\Program Files\RabbitMQ Server\rabbitmq_server-3.7.14\sbin> rabbitmqctl.bat change_password adm ...

  9. C语言学习记录(二)

    C语言学习记录(二) 一.知识要点(C语言概述) 1.C语言的发展历史和特点 C语言的发展历史 C语言最早在B语言的基础上开发出来,并于1972年在一台计算机上首次实现. C语言最开始只是为描述和实现 ...

  10. ppt 优化篇

    字体整体调节 --可以适用替换功能 去掉动画---动画-删除动画 批量替换字体颜色 编辑模板--视图-幻灯片模板 图片裁剪对齐.视频大小相同--islide 工具 视频剪辑:ppt 自带功能,剪映 横 ...