1. 前端工程化-初识前端工程化
  2. 前端工程化-自动化构建工具gulp

在进行前端开发之前,让我们试想这样一些场景:

  • 想使用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 里面其实就用了工程化的思想。