当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 前端工程化(webpack)

前端工程化(webpack)

2020年07月22日  | 移动技术网IT编程  | 我要评论

第一部分：组件、模块、工程化的区别

前端工程化既是模块化：对所有的资源进行统一管理，对开发者的开发习惯进行统一的梳理，达到自动化，工程化

模块化出现的原因（传统开发的主要问题）：
1-命名的冲突 2-文件的依赖问题

模块化:
模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互的隔离，但是可以通过特别的接口公开内部成员，也可以依赖别的模块，大模块由小模块组成，代码重用，耦合性低，方便后期的维护。

模块化的好处：
1方便代码的重用，提高开发效率 2方便后期的维护

2 组件化： 组件化按照系统的关注点进行拆分 比如系统使用下拉框 modal模态窗口 警告提醒 表格等
把这些常用的功能集合（含有HTML结构 CSS呈现 JS逻辑操作）进行封装，最用使用的时候。

第二部分：ES JS NODE.JS之间的区别

在这里插入图片描述

第三部分：⭐ES6模块化规范（重点）⭐

第三部分（1）：Babel第三方包，可以将高级的JS语法转换为低级的JS语法

在这里插入图片描述
安装步骤：
第一步： 打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
第二步： 安装完毕之后，再次输入命令安装：npm install --save @babel/polyfill

注意：如果npm安装上诉包不成功，就使用cnpm
但是需要安装cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org

配置文件：

在项目目录中创建babel.config.js文件。
编辑js文件中的代码如下：
const presets = [
    ["@babel/env",{
        targets:{
            edge:"17",
            firefox:"60",
            chrome:"67",
            safari:"11.1"
        }
    }]
]
//暴露
module.exports = { presets }

第三步：创建index

在项目目录中创建index.js文件作为入口文件
在index.js中输入需要执行的js代码，例如：
    console.log("ok");

第四步：在终端中执行

打开终端，输入命令：npx babel-node ./index.js

第五步：效果展示
在这里插入图片描述

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

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

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

第三部分（2）：ES6 默认导出和默认导入

注意：
1 - Export default 默认导出的成员（每个模块只可以使用唯一一次的，否则会报错）
2- 如果一个文件中没有导出，则会返回一个空对象 { }

默认导出语法：
export default { 需要导出的成员}

默认导入语法：
Import 接收名称 from ‘模块标识符’
在这里插入图片描述

第三部分（3）：ES6 按需导出和按需导入

	按需导出：一个模块中可以使用多次，默认导出不可以

按需导出语法 export var s1 = 10

按需导入语法 import { s1} from ‘模块标识符’ （按需导入的名称必须和按需导出的名称一致，不能乱写。但是可以用as 起别名）
在这里插入图片描述

第三部分（4）：直接导入并执行模块代码

只是单纯的执行某个模块中的代码。并不需要得到模块向外暴漏的成员，此时可以直接导入并执行模块代码
在这里插入图片描述

第四部分：webpack（重点）⭐⭐

可以进行很友好的 模块化支持 代码压缩混淆 处理JS兼容问题 性能优化等
webpack的好处： 提高开发效率和项目的可维护性

npm init -y 初始化包管理

打包前后对比：

在这里插入图片描述

第四部分（1）：如何在项目中设置webpack

配置准备：
在这里插入图片描述

第三步：mode有两种：
**- development：**开发模式，打包的代码不会压缩和混淆
**- production：**生产模式（正式上线模式），打包的代码会压缩和混淆

在这里插入图片描述

第四部分（2）：配置打包的入口和出口

默认的打包出口和入口：

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网