先做个前提,新建三个模块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. GUI程序中使用Write语句调试

    Lazarus GUI程序中使用Write语句调试 比如像VB 下的 Debug.print 可直接在立即窗口中打印出调试内容 其实可以使用 WriteLn('XXXX ', XXX); Write( ...

  2. vue项目跳转外部链接,替换链接地址参数信息

    //修改url某个指定的参数 url 地址. paramName 参数.   repalceValue替换的新值 replaceUrl( url, paramName, repalceValue){ ...

  3. OS-lab6

    OS-lab6 管道 在lab5的时候我们实现了文件类设备的读写操作,而在fd.c中,我们定义了3种设备:文件类设备.管道.终端,其中终端已经被完成了,剩下的就是管道了. 管道是一种父子进程间通信的设 ...

  4. flutter Stack 绝对布局的使用

    使用stack 和Positioned 实现绝对布局 进行位置偏移 Container( alignment: Alignment.center, width: double.infinity, ch ...

  5. 打印timescale信息

    verilog中用:$printtimescale($root.tb); systemverilog class中用: $printtimescale($sformatf("%m" ...

  6. jdk下载及配置

    JDK下载 JDK:下载网址Java Downloads | Oracle 点击document Download 点击java SE Downloads 选择需要用到的文件进行下载(我这边是win1 ...

  7. 微信小程序顶部透明

    { "pages": [ "pages/index/index" ], "window": { "backgroundTextSt ...

  8. Windows 10 与Windows11 功能比较(红字为不同点)

    Windows 10 与Windows11 功能比较(红字为不同点)

  9. ELKF搭建

    logstash cat /etc/logstash/logstash.yml |grep -v '#'path.data: /data/logstash/datapipeline.ordered: ...

  10. qt creator 在ubuntu22.04下显示不正常处理

    打开:sudo vim /etc/gdm3/custom.conf 找到:#WaylandEnable=false 去掉注释,问题解决