# 1、模块化相关规范 * [1.1模块化概述](https://www.kancloud.cn/zheng1234/vuejs/2393805#11_1) * [1.2浏览器端模块化规范](https://www.kancloud.cn/zheng1234/vuejs/2393805#12_11) * [1.3 服务器端模块化规范](https://www.kancloud.cn/zheng1234/vuejs/2393805#13__18) * [1.4大一统的模块化规范- ES6模块化 重点（导入**import**导出**export**）](https://www.kancloud.cn/zheng1234/vuejs/2393805#14_ES6____import_____export_24) * [1.4大一统的模块化规范- ES6模块化](https://www.kancloud.cn/zheng1234/vuejs/2393805#14_ES6_35) * [1\. Node.js 中通过babel体验ES6模块化](https://www.kancloud.cn/zheng1234/vuejs/2393805#1_Nodejs_babelES6_37) # 1.1模块化概述 传统开发模式的主要问题 ①命名冲突 ②文件依赖 通过模块化解决.上述问题 ●**模块化**就是把单独的一个功能封装到一一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成 员，也可以依赖别的模块 ● 模块化开发的好处:方便代码的重用，从而提升开发效率,并且方便后期的维护 # 1.2浏览器端模块化规范 1. AMD Require.js ([http://www.requirejs.cn/](http://www.requirejs.cn/)) 2.CMD Sea.js ([https://seajs.github.io/seajs/docs/](https://seajs.github.io/seajs/docs/)) # 1.3 服务器端模块化规范 1. CommonJS ① 模块分为**单文件模块**与**包**， ② 模块成员导出:**module.exports**和**exports** ③ 模块成员导入:**require**('**模块标识符**') # 1.4大一统的模块化规范- ES6模块化 重点（导入**import**导出**export**） 在ES6模块化规范诞生之前，Javascript社区已经尝试并提出了AMD、CMD、CommonJs等模块化规范。 但是，这些社区提出的模块化标准，还是存在一定的**差异性**与**局限性**、并不是浏览器与服务器**通用的模块化标准**，例如: ● AMD和CMD适用于浏览器端的Javascript 模块化 ● CommonJs适用于服务器端的Javascript 模块化 因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务器端通用的模块化开发规范。 Es6模块化规范中定义: ● 每个js文件都是一个独立的模块 ●**导入模块成员**使用**import**关键字 ●**暴露模块成员**使用**export**关键字 # 1.4大一统的模块化规范- ES6模块化 语法转换工具 ## 1\. Node.js 中通过babel体验ES6模块化 当前项目下 下载 ① npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node ②npm install --save @babel/polyfill ③项目跟目录创建文件babel.config.js ④babel.config.js文件内容如下侧代码 ~~~ const presets = [ [ "@babel/env", { targets: { edge: "17", firefox: "60" , chrome :"67"， safari :"11.1" } }] ]; module.exports = { presets } ; ~~~ ⑤通过 npx babel-node index. js执行代码