前端工程化--构建工具

冷不防 2022-10-01 10:52 168阅读 0赞

# 什么是前端工程化？ #

前端工程化是依据业务特点，将前端开发的规范、流程、技术、工具、经验形成规范，并且成立一种标准体系。

# 为什么要前端工程化？ #

我们需要通过规范的流程，自动化的工具来提升开发效率、性能、质量、多人协作能力以及开发体验。

前端现在发展这么快，面临着流程，资源组织和协同开发的种种挑战，团队要成长，建立工程化是必经之路。

but，针对不同公司和不同的项目，找到最合适的工程化方案才是最重要的，什么规范，流程，技术，可以先放一下。

# 有什么构建工具？ #

## 构建工具是干嘛的？ ##

主要是实现自动化的处理，例如代码检查，预编译，合并，压缩，生成雪碧图，sourceMap，版本管理，单元测试，以及监控。

## 构建工具三剑客 ##

*  Grunt
 *  Gulp
 *  Webpack

## Grunt，Gulp基于任务运行 ##

由上图可知，它们打包的策略通常是 All in one，最后页面还是引用 css、img、js，可以这么说，只是帮我们把同一类型的文件整合到了一起，压缩了代码。然而，还是手撸无疑。

### Grunt优点 ###

配置驱动，简单直接

### Grunt缺点 ###

当任务非常多的时候，利用配置来完成所有事情，太难了！

它的IO操作，每一次任务都要从磁盘读取文件，处理完之后，再写入磁盘，当源文件较多的时候，任务很复杂，性能就堪忧了。如果我想操作less， 读取less---编译成css---存储到磁盘---读取css---css压缩处理---存储到磁盘

### Gulp优点 ###

代码驱动，写任务和nodejs代码一样

再者，对文件的读取是流式操作，一次IO可以处理多个任务gulp处理less的操作是 读取less---编译成css---压缩处理---存储到磁盘

> 它们侧重对整个过程的控制管理，实现简单、对架构无要求、不改变开发模式，所以非常适合前端、小型、需要快速启动的项目。

## Browserify、Webpack、rollup.js 基于模块化打包 ##

主要介绍一下webpack

### webpack特点 ###

*  把一切都看作模块，html，js，css，image都可以互相引用，通过定义入口文件 entry.js 对所有依赖进行跟踪，各模块通过loader，plugins处理，最后打包到一起。
 *  按需加载 webapck会将文件分为多个代码块（chunks），还能将重复部分提取出来作为commonChunk，实现按需加在。

### webpack缺点 ###

*  上手优点蛋疼
 *  构建多页面应用配置比较麻烦，而且不好打到按需加在。

### 适用场景： ###

综上所述，Webpack 特别适合配合 React.js、Vue.js 构建单页面应用以及需要多人合作的大型项目，在规范流程都已约定好的情况下往往能极大的提升开发效率与开发体验。

转载于:https://juejin.im/post/5ca31d226fb9a05e304a9131

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关前端工程化初探

![677cea36e451d79e347cfd39a3c28c4b.png][] 摘要前端工程化可以分成四个方面来说，分别为模块化、组件化、规范化和自动化。模

落日映苍穹つ/ 2023年01月07日 07:09/ 0 赞/ 147 阅读

相关前端工程化实战

前端工程化实战工程化概述 1.工程化的定义和主要解决的问题传统语言或语法的弊端无法使用模块化。组件化重复的机械工作代码风格的

迷南。/ 2023年01月05日 14:21/ 0 赞/ 133 阅读

相关前端工程化概述

工程化的定义和主要解决的问题把项目统一管理。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

末蓝、/ 2022年12月23日 11:17/ 0 赞/ 152 阅读

相关前端工程化结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3

Myth丶恋晨/ 2022年11月29日 12:19/ 0 赞/ 145 阅读

相关浅谈前端工程化（二）Gulp和Webpack构建项目

前端构建前端构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。过去，前端一直在各种为战，不停的造轮子

悠悠/ 2022年11月26日 01:56/ 0 赞/ 143 阅读

相关前端工程化--构建工具

什么是前端工程化？前端工程化是依据业务特点，将前端开发的规范、流程、技术、工具、经验形成规范，并且成立一种标准体系。为什么要前端工程化？我们需要通过规范的流

冷不防/ 2022年10月01日 10:52/ 0 赞/ 169 阅读

相关前端构建工具

前端工程师需要维护的代码变得及为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，当然人为的错误也随着流程的增加而增加了更多的出错率。所以每一个团队都希望有一种工具，能帮助

分手后的思念是犯贱/ 2022年09月26日 13:54/ 0 赞/ 141 阅读

相关 Gulp前端构建工具

安装介绍 1.全局安装gulp npm install --global gulp 2. 作为项目的开发依赖（devDependencies）安装：(在

素颜马尾好姑娘i/ 2022年06月17日 04:00/ 0 赞/ 306 阅读

相关 Gulp 前端构建工具

基于流 1. 安装 2. 使用 3. API 4. 常用 gulp 插件基于流 Gulp是以 Nodejs中的stream(流) 为媒介

柔光的暖阳◎/ 2022年05月26日 09:48/ 0 赞/ 218 阅读

相关前端自动化构建工具——gulp

操作过程：需要配置文件后才能执行 $ gulp命令（1）配置一些基本信息，执行命令：$ npm init 在git指令中，对下面每一项进行配置，注意：GitHub项目

一时失言乱红尘/ 2022年05月09日 11:24/ 0 赞/ 282 阅读