前端工程化 学习笔记4

前端工程化

什么是前端工程化？

前端工程化是指将前端开发的流程规范化，标准化，包括开发流程，技术选型，代码规范，构建发布等，用于提升前端工程师的开发效率和代码质量。

为什么要前端工程化？

• 复杂度高：前端项目的多功能，多页面，多状态，多系统
• 规模大：团队开发，多人协作，代码质量管理
• 要求高：页面性能优化（CDN/异步加载/请求合并），CSS兼容性，单页面应用，服务端渲染。。。

怎么做到前端工程化？

• 从业务着手
  简单的单页面应用，使用gulp打包 +同步工具实现开发全流程
• 从复杂度考虑
  jenkenis git/gitlab webpack React/Vue/Angular
  框架最终要服务于我们的项目，而非累死累活的去维护框架
• 从已知向未知扩展
  不同的技术有不同的适应点，选择合适的才是最好的

构建工具：Webpack & gulp

Webpack

https://webpack.js.org/

核心概念：入口，输出，Loader（用来转换某些类型的模块）, 插件（范围比Loader更广），模式/兼容性（babel-polyfill）

Webpack中文文档：https://webpack.docschina.org/concepts/

使用Webpack的两种方式：
第一种

• ./node_modules/.bin/webpack --version 打印出webpack版本号
• npx webpack --version npm5之后，有这个指令
• npx create-react-app my-app 快速创建react项目

第二种： 全局安装webpack

• npm install webpack -g

总结：

• 初始化项目
  npm init -y 快速创建nodejs项目
• nvm, node, npm 环境确认
  nvm install/use v10.16.0 node -v npm -v
• 两种webpack安装与三种使用方式
  npm install -g/-D webpack webpack-cli
npx webpack&./node_modules/.bin/webpack&npm run

入口与输出

• 关键词entry, output
  webpack配置文件webpack.config.js
• Node的路径相关：Path模块的使用
  使用require进行引入，webstorm配置node core
• Output中的path需要使用绝对路径
  path.join去拼接路径，Nodejs全局变量__dirname

loader plugins

总结：

• loaders, plugins
  test去匹配文件，loader倒序加载流水线处理
• plugin的使用，热模块替换
  安装plugin的依赖，在plugins属性中new一个plugin
• webpack-dev-server
  引用HMR插件，修改js的时候，自动刷新页面

babel

https://www.babeljs.cn/

Webpack应用总结

• 核心概念
  入口，输出，loader，插件，模式
• 开发与生产模式中，按需配置
  开发中使用热更新，生产模式中使用压缩插件
• babel配置
  配置文件，polyfile

gulp

https://gulpjs.com/docs/en/getting-started/quick-start

• 易于使用
• 构建快速
• 插件系统
• 易于学习
  

browserSync

gulp总结

• 基本配置
  配置任务，压缩代码，处理css/img
• 热刷新browsersync
  高效率开发，网页实时刷新

Yoeman

https://yeoman.io/

Yeoman脚手架总结

• 全局yo命令安装，安装命令yo <package>
  脚手架的名称是generator-打头，如：yo brian-imooc
• 使用generator-generator快速创建脚手架生成项目
  全局安装npm install -g generator-generator
• 使用npm进行发布
  link命令本地测试，发布时设置npm registry