ES6模块化 - 指南

上一篇配置webpack（Vue中webpack的使用_vue webpack-CSDN博客）的时候接触到模块化的规范，这篇拓展一下知识面，详细了解一下ES6模块化。

一、历史

浏览器与服务器通用的模块化 标准，例如：就是在 ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。 但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性、并不

• AMD 和 CMD 适用于浏览器端的 Javascript 模块化

• CommonJS 适用于服务器端的 Javascript 模块化

• ES6 模块化规范是浏览器端与服务器端通用的模块化制作规范

二、使用ES6

每个 js 文件都是一个独立的模块 ；

导入其它模块成员使用 import 关键字 ；

向外共享模块成员运用 export 关键字；

1、默认导入导出

//01.默认导出.jslet n1 = 10let n2 = 20function show() {} export default { n1, show}

import m1 from './01.默认导出.js' console.log(m1)//{ n1: 10, show: [Function: show] }

2、按需导出

//03.按需导出.jsexport let s1 = 'aaa'export let s2 = 'ccc'export function say() {}

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

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

//05.直接运行模块中的代码.jsfor (let i = 0; i< 3; i++) { console.log(i)} ===================================import './05.直接运行模块中的代码.js'