有关es6的模块化

假如有两个文件: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})

原文地址:https://www.cnblogs.com/ygjzs/p/12230863.html

时间: 2024-07-30 22:57:15

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

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

http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium=email 原文链接 我之前在Twitter上发过一个照片,表达出我有多快乐,这像是一个时光机让我们可以穿梭到未来-ES6的时代!下面让我来展示如何使用6to5让今天就可以练手ES6的模块化. 使用6to5让今天就可以练手ES6的模块化 第一步 如果你现在还不了解ES6的模块化开发,请在JSModules.

ES6(Module模块化)

模块化 ES6的模块化的基本规则或特点: 1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取. 一个模块就是一个单例,或者说就是一个对象: 2:每一个模块内声明的变量都是局部变量, 不会污染全局作用域: 3:模块内部的变量或者函数可以通过export导出: 4:一个模块可以导入别的模块 一.导入和导出 1.导出 导入: 结果: 2.只取需要的 结果: 3.导出数目太多时(无需一一对应) * 代表全部内容,as 代表别名 结果: 4.推荐写法 结果

js当中CommonJS 和es6的模块化引入方案以及比较

js当中CommonJS 和es6的模块化引入方案以及比较:https://blog.csdn.net/jackTesla/article/details/80796936 在es6之前,对于模块化方案主要是CommonJS和AMD两种.咱们这次说一下ES6和CommonJS的区别. 它们有两个重大差异: CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用.CommonJS 模块是运行时加载,ES6 模块是编译时输出接口.    第一个差异:    CommonJS 模块输

深入浅出ES6教程模块化

大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了Promise的用法,下面我们一起来继续学习模块化: JavaScript本身是不支持模块化的,只不过后来一些社区的大佬制定了一个模块规范,主要分为两种,一个是用于服务器的CommonJs,比如nodeJs中的require:另一个是用于客户端的AMD,比如requireJs.后来ES6提供了通用的模块化方案: ES6专门提供了import和export这两个小可爱 小白:那么它们都是用来做什么的呢?怎么用的呢? 格格:首

es6的模块化;js的模块化

现在感觉Java.Python.Js都是越来越工程花,模块化.懂得每个模块的功能和使用场景,你很快的就能搭起一个功能齐备的应用.至于应用的性能.稳定性等,还在于你对模块的理解深度以及组合的成熟度,就看你的功夫了. 1.Java通过Maven这种方式管理各类功能的Jar包,实现功能模块的组合 2.Python通过Pip这种方式安装各类你需要的功能模块 3.Javascript通过Npm这种方式,可以安装各类功能的模块 对于Js,你需要做的就是在React中使用npm安装各类功能的扩展,正确使用这些

AMD,CMD.CommonJs和UMD还有es6的模块化对比

CommonJS CommonJS是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象. 例如: // foobar.js //私有变量 var test = 123; //公有方法 function foobar () { this.foo = function () { // do someing ... } this.bar = functi

ES6新特性:使用export和import实现模块化

在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了几个链接: 现在ES6自带了模块化, 也是JS第一次支持module, 在很久以后 ,我们可以直接作用import和export在浏览器中导入和导出各个模块了, 一个js文件代表一个js模块: 现代浏览器对模块(module)支持程度不同, 目前都是

JavaScript模块化 --- Commonjs、AMD、CMD、es6 modules

随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化. 这篇文章还是希望能给大家一个比较好的思路,即JavaScript模块化是如何一步一步地发展起来的,并且也会主要对这些模块化方式做一个简单的比较. 第一阶段:无模块化 JavaScript最初的作用仅仅是验证表单,后来会添加一些动画,但是这些js代码很多在一个文件中就可以完成了,所以,我们只需要在html文件中添加一个scri

js 模块化的一些理解和es6模块化学习

模块化 1 IIFE 2 commonjs 3 浏览器中js的模块化 4 简单理解模块加载器的原理  5 es6 之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式(IIFE)的模式,比如单个功能的时候当时想到是不会涉及到全局变量的污染,在封装基础的模块(比如里面的表单验证功能) (function(win){ var obj = {}; function add() { console.log("add"); } obj.add = add; win