前端工程化（ES6模块化和webpack打包）

2020-10-09 19:32:50 阅读：279 来源： 互联网

目标：
　　能够知道有哪些模块化的相关规范
　　能够使用webpack
　　能够使用Vue单文件组件
　　能够使用Vue脚手架
　　能够使用Element-UI
目录：
　　模块化相关规范
　　webpack用法
　　Vue单文件组件
　　Vue脚手架
　　Element-UI的基本使用

1、模块化相关规范
1.1、模块化概述
传统开发模式的主要问题
　　命名冲突
　　文件依赖
通过模块化解决上述问题
　　模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。
　　模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护。
1.2、浏览器端模块化规范
AMD
　　Require.js(http://www.require.cn/)
CMD
　　Sea.js(https://seajs.github.io/seajs/docs/)
1.3、服务器端模块化规范
CommonJS
　　模块分为单文件模块与包
　　模块成员导出：module.exports和exports
　　模块成员导入：require('模块标识符')
1.4、大一统的模块化规范-ES6模块化
在ES6模块化规范诞生之前，JavaScript社区已经尝试提出了AMD、CMD、CommonJS等模块化规范。
但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：
　　AMD和CMD适用于浏览器端的JavaScript模块化
　　CommonJS适用于服务器端的JavaScript模块化
因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，式浏览器与服务器通用的模块化开发规范。
ES6模块化规范中定义：
　　每个js文件都是一个独立的模块
　　导入模块化成员使用import关键字
　　暴露模块化成员使用export关键字
1.5、ES6模块化的基本语法
默认导出与默认导入
　　默认导出语法export default默认导出的成员

//当前文件模块为ml.js
//定义私有成员a和c
let a = 10
let c = 20
//外界访问不到变量d，因为它没有暴露出去
let d = 30
function show(){}
    //将模块中的私有成员暴露出去，供其他模块使用
export default{
    a,
    c,
    show
}

　　默认导入语法import 接收名称 from '模块标识符'

//导入模块成员
import ml from './ml.js'
console.log(ml)
//打印输出结果为：
//{a:10,c:20,show:[Function:show]}

　　注意：每个模块中，只允许使用唯一的一次export default，否则会报错！

标签：ES6,模块化,成员,规范,js,webpack,模块,工程化
来源： https://www.cnblogs.com/michealyang/p/13787623.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端工程化（ES6模块化和webpack打包）