webpack前端工程化

 

有哪些模块化的相关规范

使用webpack

使用Vue单文件组件

使用Vue脚手架

使用Element-UI

 

 

1. 模块化概述

传统开发模式的主要问题

1.命名冲突

2.文件依赖

 

通过模块化解决上述问题

• 模块化就是把单独的一个功能封装到一个模块(文件)中，模块之间相互隔离，但是可以通过特点的接口公开内部成员，也可以依赖别的模块
• 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护

 

 

2. 浏览器端模块化规范

AMD

require.js

CMD

sea.js

 

 

 

3. 服务器端模块化规范

CommonJS

• 模块分为单文件模块与包
• 模块成员导出：module.exports和exports
• 模块成员导入:require('模块标识符')

 

 

4. 大一统的模块化规范-ES6模块化

在ES6模块化规范诞生之前，JavaScript社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范

 

但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，

• AMD和CMD适用于浏览器端的JavaScript模块化
• CommonJS适用于服务器端的JavaScript模块化

 

因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，试浏览器于服务器端通用的模块化开发规范。

 

ES6模块化规范中定义：

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

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

暴露模块成员使用export关键字

 

 

 

5. Node.js中通过babel体验ES6模块化

1.    npm  install  --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

2.     npm  install  --save  @babel/polyfill

3.     项目跟目录创建文件  babel.config.js

4.      babel.config.js  文件内容

 

创建index.js文件

 5.    通过 npx  babel-node index.js 执行代码

 

 

 

 

 

6. ES6模块化的基本语法

1. 默认导出与默认导出

• 默认导出语法 export  default 默认导出成员

 

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

 

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

 

 

 

7. 按需导出与按需导入

按需导出语法  export let s1=10

 

 按需导入语法  import  {s1} from '模块标识符'

 

 注意：每个模块中，可以使用多次按需导出

 

 

 

8. 直接导入并执行代码模块

有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码