网站后台建设公司上海企业推广

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

一、历史

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

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

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

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

二、使用ES6

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

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

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

1、默认导入导出

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

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

2、按需导出

//03.按需导出.js
export 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.直接运行模块中的代码.js
for (let i = 0; i < 3; i++) {console.log(i)
}===================================
import './05.直接运行模块中的代码.js'