先做个前提,新建三个模块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. React.CreateContext

    跨组件传递的内容组件,该组件导出两个对象Provider 提供数据, Consumer, 消费数据 Context被翻译为上下文,在React的官方文档中归类于高级部分,属于React的高级API,但 ...

  2. 在k8s中使用harbor仓库

    在k8s中使用harbor仓库 修改每个node上的docker认证仓库 将每个node节点上的docker同样需要配置可信任仓库 vi /etc/docker/daemon.json #修改为 {& ...

  3. python常用的六个字符串处理方法

    1.upper(将小写字母转换为大写) 语法: str.upper() 参数: NA 实例: a = 'abc' b = a.upper() print(b) 结果: ABC 2.lower(将小写字 ...

  4. fastjson场景

    json转java对象 // 将Json字符串通过fastjson转为JSONObject对象 JSONObject jsonObject = JSONObject.parseObject(userJ ...

  5. eval对函数this指向的影响

    js eval() 对 this 指向的影响 const fn = () => { console.log('fn this is:', this) } function evalWrapper ...

  6. 动手学强化学习 第二章 多臂tiger机问题 阅读笔记

    第二章 多臂tiger机问题 第一节 简介 强化学习是一种试错型学习范式. 第二节 问题介绍 多臂tiger机(multi-armed bandit,MAB)不存在状态信息,只有动作和奖励.有一个拥有 ...

  7. 在Mac的哪里可以找到bashrc文件

  8. Java8函数式编程(A)

    将行为作为数据传递 函数编程的最直接的表现,莫过于将函数作为数据自由传递,结合泛型推导能力,使代码表达能力获得飞一般的提升. Java8怎么支持函数式编程? 主要有三个核心概念: 函数接口(Funct ...

  9. wpf treeview 绑定图标方式

    <TreeView Grid.Row="0" Grid.Column="0" x:Name="foldersItem" Selecte ...

  10. 采集地图商家电话,导出到excel

    快速的把高德地图左边的搜索列表里的商家地图,电话,导出到EXCEL里. 采集地图商家电话,可以快速提高销售人员的业绩. 如何快速地将高德地图里的商家电话资料导出EXCEL? 操作步骤: 1. 选择你要 ...