携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

1.前端工程化贯穿整个研发流程，解决研发流程中的问题

2.工程化的核心目标是三点：效率、规范、性能

3.只有了解前端研发流程的痛点，才能够进行诊断和优化

4.需要站在研发场景的角度去思考研发流程痛点

企业前端项目面临的真实问题

1.项目量级增加：几千行代码 => 几万行代码

2.项目数量扩大：几个项目 => 几千个项目

3.项目复杂度高：web项目 => h5/pc/小程序/脚手架/服务端

4.团队人数增长：几个前端 => 几百前端

企业前端工程问题解法

1.项目量级增加：模块化(cjs和esm)、npm、webpack

2.项目数量扩大：研发平台、研发脚手架

3.项目复杂度高：工程脚手架（统一解决不同技术栈的工程差异）

4.团队人数增长：研发平台、研发脚手架

前端工程化在企业的应用场景

1.项目研发模式升级(模块化+mvvm)

2.工程脚手架(react+ vue +egg...)

3.研发脚手架(创建+发布+管理项目)

4.项目性能优化

npm初步思路

1.集中管理所有模块，所有模块都上传到仓库(registry)

2.模块内创建package.json标注模块的基本信息

3.通过 npm publish 发布模块，上传到仓库(registry)

4.通过 npm install 安装模块，模块安装到 node_modules里面

npm介绍

1.npm解决的核心问题是模块安装管理

2.npm包含cli 、模块仓库、官网三个部分

npm原理解析

1.npm init 创建模块、npm install 安装模块、npm publish 发布模块

2.npm link本地开发、npm config 调整配置、npm run 调用scripts

3.npm规范：package.json管理模块信息，node_modules保存依赖

npm局限

1.npm只能解决模块的高效管理和获取问题

2.npm无法解决性能加载性能问题

webpack原理

1.最初的webpack核心解决的问题就是代码的合并和差费

2.webpack的核心理念是将资源都看成模块，统一进行打包和处理

3.webpack提供了Loader和plugin完成功能扩展