ES6 模块化简介

在ES6模块化规范诞生之前，JavaScript社区已经尝试提出了AMD、CMD、CommonJS等模块化规范。

但是，这些由社区提出的模块化标准，有一定的差异性和局限性，并不是浏览器与服务器通用的模块化标准。例如：

AMD和CMD适用于浏览器端的JavaScript模块化
CommonJS适用于服务器端的JavaScript模块化

因此，2015年ES6正式定义了JavaScript模块化标准。

ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习AMD、CMD或CommonJS等模块化规范。

ES6模块化规范中定义：

每个js文件都是一个独立的模块
导入其他模块成员使用import关键字
向外共享模块成员使用export关键字

ES6 Module会自动采用严格模式，这在ES5中是一个可选项。以前我们可以通过选择是否在文件开始时加上”use strict”来控制严格模式，在ES6 Module中不管开头是否有”use strict”，都会采用严格模式。

在NodeJS中使用ES6模块化

node.js中默认仅支持CommonJS模块化规范，如果要使用ES6模块化，需要进行如下两步配置：

确保安装了v14.15.1或更高版本的node.js
在package.json的根节点中添加"type":"module"节点。

ES6 模块化导出基本语法

ES6的模块化主要包含如下3种用法：

默认导出与默认导入
按需导出与按需导入
直接导入并执行模块中的代码

1）默认导出与默认导入

默认导出

let n1 = 10;
let n2 = 20;
function show(){}
export default{n1,show
}

注意：每个模块中，默认导出export default只允许使用一次，否则会报错。

默认导入

import m1 from './01_默认导出.js'
console.log(m1)

默认导入时的接收名称可以任意，只要是合法的成员名称即可。

执行

2）按需导出与按需导入

按需导出

export let s1 = 'aaa'
export let s2 = 'ccc'
export function say() {}

按需导入

import { s1, s2, say } from './03.按需导出.js'
console.log(s1)
console.log(s2)
console.log(say)

每个模块中可以使用多次按需导出
按需导入的成员名称必须和按需导出的名称保持一致
按需导入时，可以使用 as关键字进行重命名
按需导入可以和默认导入一起使用

按需导入和默认导入一起使用

3）直接导入并执行模块中的代码

如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员，此时，可以直接导入并执行模块代码。

CommonJS

CommonJS是由JavaScript社区于2009年提出的包含模块、文件、IO、控制台在内的一系列标准。在Node.js的实现中采用了CommonJS标准的一部分，并在其基础上做了一些调整。我们所说的CommonJS模块和Node.js中的实现并不完全一样，现在一般谈到CommonJS其实是Node.js中的版本，而非它的原始定义。

CommonJS最初只为服务端设计，直到有了Browsefify——一个运行在Node.js环境下的模块打包工具，它可以将CommonJS模块打包为浏览器可以运行的单个文件。这意味着客户端的代码也可以遵循CommonJS标准来编写了。

Node.js遵循了CommonJS模块化规范，CommonJS规定了模块的特性和各模块之间如何相互依赖。

CommonJS规定：

每个模块内部，module变量代表当前模块
module变量是一个对象，它的exports属性（即module.exports）是对外的接口。
加载某个模块，其实是加载该模块的module.exports属性。require()方法用于加载模块。

Node中的模块

Node.js中的模块，根据来源不同，分为了3大类，分别是：

内置模块（内置模块是由Node.js官方提供的，例如fs、path、http等）
自定义模块（用户创建的每个.js文件，都是自定义模块）
第三方模块（由第三方开发出来的模块，使用前需要先下载）

使用require加载模块

在CommonJS中使用require进行模块导入，使用require()方法，可以加载内置模块、用户自定义模块、第三方模块进行使用。

注意：使用require()方法加载模块时，会执行被加载模块中的代码。使用require()，可以省略.js后缀。

当我们require一个模块时会有两种情况：

require的模块是第一次被加载。这时会首先执行该模块，然后导出内容。
require的模块曾被加载过。这时该模块的代码不会再次执行，而是直接导出上次执行后得到的结果。

模块会有一个module对象用来存放其信息，这个对象中有一个属性loaded用于记录该模块是否被加载过。它的默认值为false，当模块第一次被加载和执行过后会置为true，后面再次加载时检查到module.loaded为true，则不会再次执行模块代码。

模块作用域

在自定义模块中定义的变量、方法等成员，只能在当前模块内被访问，这种模块访问级别的访问限制，叫做模块作用域。

关于module对象

每个.js自定义模块中都有一个module对象，它里面存储了和当前模块有关的信息。

module.exports对象

在自定义模块中，可以使用module.exports对象，将模块内的成员共享出去，供外界使用。
外界用require()方法导入自定义模块时，得到的就是module.exports所指向的对象。

使用module.exports向外共享成员

注意：使用require()方法导入模块时，导入的结果，永远以module.exports指向的对象为准。

exports对象

由于module.exports写起来比较复杂，为了简化向外共享成员的代码，Node提供了exports对象。默认情况下，exports和module.exports指向同一个对象。最终共享的结果，还是以module.exports指向的对象为准。

在使用exports时要注意，不要直接给exports赋值，否则会导致其失效。如果exports指向了新的对象，module.exports却仍然是原来的空对象。

注意：导出语句不代表模块的末尾，在module.exports或exports后面的代码依旧会照常执行。

exports和module.exports的使用误区

ES6模块化+CommonJS相关推荐

JavaScript模块化 --- Commonjs、AMD、CMD、es6 modules
随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化. 这篇文章还是希望能给大家一 ...
commonjs是什么_第一步：面试官让我解释什么是Common.js和ES6模块化
前两篇文章中,有小伙伴给我留言说怎么没有模块化相关的知识点,模块化在面试中被问到的概率非常大,但因为前几篇文章篇幅实在太长了些,所以模块化知识点单独这篇文章给大家聊聊. 先说说什么是模块化,就是将独立 ...
commonjs 和 es6模块化开发入门
commonjs模块化首先写一个api,提供给外部调用 //commonjslet sum =(a,b)=> a+b;// 暴露接口 module.exports = {sum // sum: ...
前端模块化CommonJS、AMD、CMD、ES6
一.前端模块化什么是模块化?为什么前端需要模块化? js代码量激增,放在同一个文件里面,不容易维护,而且牵一发而动全身. 这时候就需要将代码按照逻辑放在不同的文件里面,按照一定的语法规则,遵循特定的 ...
es6模块化机制及CommonJS与ES6模块化规范区别
模块化机制 CommonJS模块化规范导入 1. let { firstName, lastName } = require('./1-module.js') 导出 1. module.export ...
Node.js ES6模块化
AMD 和 CMD 适用于浏览器端的 Javascript 模块化 CommonJS 适用于服务器端的 Javascript 模块化 ES6 语法规范中,在语言层面上定义了 ES6 模块化规范,是浏览 ...
前端工程化（ES6模块化和webpack打包）
文章目录目标: 目录: 1.模块化相关规范 1.1.模块化概述 1.2.浏览器端模块化规范 AMD CMD 1.3.服务器端模块化规范 CommonJS 1.4.大一统的模块化规范-ES6模块化 1 ...
全面理解ES6模块化编程
今天我们来学习ES6的模块化系统,如何从模块中导出变量.函数.类,在其他模块中去使用. 在ES6的模块系统中,每个JS文件可以理解为一个模块,模块代码以严格模式执行,所以模块中的变量.函数不会添加全局 ...
ES6模块化与异步编程高级用法
ES6模块化与异步编程高级用法一.学习目标能够知道如何使用ES6的模块化语法能够知道如何使用Promise解决回调地域的问题能够知道如何使用async/await 简化Promise的调用能 ...

ES6模块化+CommonJS