标签：babel 前端 导出 js 导入 模块 模块化 工程化
目录模块化的相关规范
模块化概述：
传统开发的主要问题：
1 命名冲突
2 文件依赖！
模块化开发：
1 模块化开发就是把单独的一个功能封装到一个模块（文件中），模块之间相互隔离， 但是可以通过特定的接口公开内部成员， 亦可以依赖其他模块
2 模块化开发的好处： 方便代码的重用， 从而提升开发效率， 并且方便后期的维护
浏览器端模块化规范：
1 AMD
2 CMD
上面两种浏览器端的模块化规范已经落伍了！
服务器端模块化规范：
1 CommonJS
1 模块分为 单文件模块 与 包
2 模块成员导出： modules.exports 和 exports
3 模块成员导出 ： require(‘模块标识符’)
大-统的模块化规范-ES6模块化
在ES6模块化规范诞生之前，Javascript 社区已经尝试并提出了AMD、CMD、CommonJs 等模块化规范。
但是，这些社区提出的模块化标准，还是存在一定的差异性 与局限性、并不是浏览器与服务器通用的模块化标准，例如：
-
AMD和CMD适用于浏览器端的Javascript 模块化
-
CommonJs适用于服务器端的Javascript 模块化
因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务器端通用的模块化开发规范。
ES6模块化规范中定义：
● 每个js文件都是一个独立的模块
● 导入模块成员使用 import关键字
● 暴露模块成员使用export关键字
====
1.Node.js 中通过babel体验ES6模块化
1 npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
2 npm i --save @babel/polyfill
3 项目跟目录创建文件babel . config. js
babel. config. js文件内容如右侧代码 
温馨提醒：你再执行上面的代码的时候最好在你的工作目录下先执行一下npm init让项目中出现一个package.json的初始化文件！
ES6模块化的基本语法：
1默认导出 与 默认导入：
01 默认导出语法 export default 默认导出的成员
02 默认导入的语法 import 接受名称 from ‘模块标识符’
// 当前文件模块为 m1.js
// 定义私有成员 a 和 b
// 外界访问不到变量d ，因为他没有被暴露出去
// 将本模块中的私有成员暴露出去， 供其他模块使用
let a = 10
let obj = {
name: '小时姑娘',
age: 23
}
// 默认导出的方式
export default {
a,
obj
}
// 导入模块成员
import m1 from XXXX[导入文件的路径]
// 路径最好加上./不然可能会报错!
import m1 from './m1.js'
console.log("lvhang")
console.log(m1.a)
console.log(m1.obj.name)
注意点：
在每一个模块中 ， 只允许使用唯一的一次 export default ， 否则会报错！
2 按需导出 与 按需导入
1 按需导出语法 export let s1 = 10
// 按需导出
// 当前的文件模块为 m1.js
// 向外按需导出变量s1
export let s1 = 'aaa';
// 向外按需导出变量s2
export let s2 = 'ccc';
// 向外按需导出方法 say
export function say = function() {
}
2 按需导入语法 import { s1 } from ‘模块标识符’
// 按需导入
// 导入模块化成员
**import { s1, s2, say } from './m1.js'**
console.log(s1);
console.log(s2);
console.log(say);
脚下留心：
每个模块中， 可以使用多次按需导入，但是默认导入，只能有唯一的一次！
标签：babel,前端,导出,js,导入,模块,模块化,工程化 来源： https://www.cnblogs.com/lvhanghmm/p/14346580.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。