假如有两个文件:app.js和config.js

app.js为主文件要去引用config这个模块

以前学习node时使用的模块导出:

需求:导出三个成员,分别是 foo: bar f: function num: 10

exports.foo = 'bar'
exports.f = function () { }
exports.num = 10

es6中的模块导出

方法一

export const foo = 'bar'
export const f = function () { }
export const num = 10

两种可以混合使用

方法二

const foo = 'bar'
const f = function () { }
const num = 10 export {
foo,
f,
num
}

通过 export 导出的成员必须通过解构赋值按需加载

或者通过import * as 变量名 的形式加载所有通过 export 关键字导出的接口成员

通过 export default 加载导出的成员必须通过 import 变量名 from '模块标识' 进行加载

export 和 export default 可以共存

import config from './config'
import { foo, num } from './config'
import * as config from './config'
import { foo } from './config'

默认导出

config.js

// 相当于 module.exports = function () {}
export default function () {
console.log('fff')
}

app.js:

// 这种方式会去找被加载模块中通过 export default 导出的成员
import defaultConfig from './config'

defaultConfig任意指定

最后通过模板字符串将它们打印出来

console.log(default: ${defaultConfig}, foo: ${foo}, all: ${allConfig})

有关es6的模块化的更多相关文章

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

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

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

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

  3. ES6的模块化

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

  4. es6的模块化编程

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

  5. ES6(Module模块化)

    模块化 ES6的模块化的基本规则或特点: 1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取. 一个模块就是一个单例,或者说就是一个对象: 2:每一个 ...

  6. ES6之模块化

    本文介绍ES6实现模块化的方法:使用import和export. 导入的时候需不需要加大括号的判断:1.当用export default people导出时,就用 import people 导入(不 ...

  7. 面试 11-01.ES6:模块化的使用和编译环境

    11-01.ES6:模块化的使用和编译环境 #前言 #ES6的主要内容 模块化的使用和编译环境 Class与JS构造函数的区别 Promise的用法 ES6其他常用功能 本文来讲"模块化的使 ...

  8. ES6的模块化规范和CommonJS的模块化规范的差异

    ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在成为浏览器和服务器通用的模块解决方案.其模块功能主要由两个命令构成:export 和 import.export命令用于规定模块的对 ...

  9. 深入浅出ES6教程模块化

    大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了Promise的用法,下面我们一起来继续学习模块化: JavaScript本身是不支持模块化的,只不过后来一些社区的大佬制定了 ...

  10. 5-5 ES6的模块化的基本规则或特点

    一.AMD, CMD, CommonJs和ES6对比 1.AMD ==> 是RequireJS在推广过程中对模块定义的规范化产出 // RequireJS定义标准, 导步加载依赖, 依赖前置 d ...

随机推荐

  1. 搭建python运行环境

    一.下载Anaconda Anaconda是Python的包管理器和环境管理器 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 参考:ht ...

  2. 20191231--python学习第五天

    1.内容回顾与补充 int类型 (1)py2与py3的区别 (2)除法 (3)强制转换 int('字符串') [重要] int(布尔值):返回的结果只有0和1 bool类型 (1)强制转换: bool ...

  3. ELF和BIN的区别,资料整理

    https://www.cnblogs.com/fah936861121/articles/8143556.html 1.Bin Bin文件是最纯粹的二进制机器代码, 或者说是"顺序格式&q ...

  4. bat常用符合和for语句等

    一.开头 @echo off(默认是echo on)@echo off执行以后,后面所有的命令均不显示,包括本条命令 二.特殊符号 1. | 命令管道符,echo Y|rd /s c:\abc,通过管 ...

  5. 前端工具配置(webpack 4、vue-cli 3)

    随着前端项目复杂度的增加,其所依赖的资源也越来越多,从最初的HTML文件,CSS文件,JS文件发展到现在的各种预处理文件,模板文件等等.文件多了,项目大了,项目的维护就变得更加困难了,用户加载页面的速 ...

  6. 一起了解 .Net Foundation 项目 No.5

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Couchbase Lit ...

  7. 细读jsr中的yield语义,或者不是我们想象中的那样

    这只是我的个人观点,如有错误,希望你可以指出. 首先英文原版 中文译版 我觉得“不需要”还会让人产生误解,应该译为不一定要. 很多时候会被断章取义地理解,我们一定要有“不一定”,“可能”的意识,下面给 ...

  8. http各个版本(1/1.1/2)对比

    参考的文章: 从理论到实践 全面理解HTTP/2 HTTP协议以及HTTP2.0/1.1/1.0区别 综合阐述http1.0/1.1/2和https 目录: http1.1 长连接 HTTP 1.1支 ...

  9. MarkdownPad2 安装以及出现的错误(This view has crashed)

    在这里首先感谢 堃堃5love 的解决办法 原文链接:https://blog.csdn.net/kunkun5love/article/details/79495618 声明:写这个是为了以后遇见问 ...

  10. C# 数据类型详解以及变量、对象与内存

    学习刘铁猛老师<C#语言入门详解>视频,针对其中重点知识点进行总结. 1.什么是类型? 类型又称为数据类型(Data Type),数据类型在数据结构中的定义是一个值的集合以及定义在这个值集 ...