在进行前端开发之前,让我们试想这样一些场景:
- 想使用ES6+新特性,但是兼容性有问题
- 想使用Less/Sass/PostCSS增强CSS的编程性,但是运行环境不能直接支持
- 想使用模块化的方式提高项目的可维护性,但运行环境不能直接支持
- 部署上线前需要
手动
压缩代码以及资源文件,部署过程需要手动
上传代码到服务器 - 多人协同开发,无法硬性同意大家的代码风格,从仓库中pull回来的代码质量无法保证
- 部分功能开发时需要等待后端接口提前完成
- ……
这对现代前端开发者而言,简直就是无法想象的痛苦,那么有没有一种解决方案可以解决以上疼点呢?答案当然是有的,随着Node.js的兴起,前端工程化的概念迅速兴起并且普及。
什么是工程化呢?
工程化不是某一个工具,它是一切以提高效率、降低成本、质量保证为目的的手段。
前端工程化主要解决了那些问题呢?
- 传统语言或语法的弊端(新的语言标准支持不优化)
- 无法使用模块化/组件化
- 重复的机械化工作
- 代码风格统一、代码质量保证
- 依赖后端接口支持(Mock)
- 整体依赖后端项目
在那些方面可以使用工程化的概念来解决问题呢?
- 创建项目结构、创建特定类型文件(vue-cli、create-react-app)
- 格式化代码、校验代码风格(babel、sass、PostCSS、eslint)
- 编译、构建、打包(gulp、webpack)
- 启动服务、模拟数据、热更新(devServer、Mock、HMR)
- 提交代码、Code Review(Git Hooks、Lint-staged)
- CI、CD、自动发布
- ……
这个demo wechat-miniprograme-scss 里面其实就用了工程化的思想。