一、为什么要做前端工程化
技术是为了解决问题而存在的
1、为了使用ES6+新特性,但是兼容有问题。
2、想要使用Less,Sass,PostCSS增强CSS的编程性,但是运行环境不能支持。
3、想要使用模块化的方式提高项目的可维护性,但是运行环境不能直接支持。
4、部署上线前需要手动压缩代码及资源文件、部署过程需要手动上传代码到服务器。
5、多人协作开发,无法硬性统一大家的代码风格,从仓库PULL回来的代码质量无法保证。
6、部分功能开发时需要等待后端服务接口提前完成。
主要解决问题归纳:
1、传统语言或语法的弊端
2、无法使用模块化/组件化
3、重复的机械式工作
4、代码风格统一、质量保证
5、依赖后端服务接口支持
6、整体依赖后端项目
二、工程化的表现:
一切以提高效率、降低成本、保证质量为目的的手段都属于[工程化]
(脚手架) (格式化) (Web Server) (Git Hooks)
创建项目 --> 编码 --> 预览/测试 --> 提交 --> 部署 (CI/CD、自动发布)
三、工程化不等于某个固定工具
工具并不是工程化的核心,工程化的核心应该是对项目的规划和架构,工具只是实现的一种手段。
工程化的集成:vue-cli、angular-cli、create-react-app、gatsby-cli
四、工程化与Node.js
工程化的一切都要归功于Node,Node除了让JavaScript有了新的舞台,也进行了一场新的[工业革命]。
我们用到的大部分功能,都是用到Node开发的:
1、脚手架工具开发
2、自动化构建系统
3、模块化打包
4、项目代码规范
5、自动化部署