前端工程化
什么是前端工程化?
前端工程化是指将前端开发的流程规范化,标准化,包括开发流程,技术选型,代码规范,构建发布
等,用于提升前端工程师的开发效率和代码质量。
为什么要前端工程化?
- 复杂度高:前端项目的多功能,多页面,多状态,多系统
- 规模大:团队开发,多人协作,代码质量管理
- 要求高:页面性能优化(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
Webpack应用总结
- 核心概念
入口,输出,loader,插件,模式 - 开发与生产模式中,按需配置
开发中使用热更新,生产模式中使用压缩插件 - babel配置
配置文件,polyfile
gulp
https://gulpjs.com/docs/en/getting-started/quick-start
- 易于使用
- 构建快速
- 插件系统
- 易于学习
browserSync
gulp总结
- 基本配置
配置任务,压缩代码,处理css/img - 热刷新browsersync
高效率开发,网页实时刷新
Yoeman
Yeoman脚手架总结
- 全局yo命令安装,安装命令
yo <package>
脚手架的名称是generator-打头,如:yo brian-imooc - 使用generator-generator快速创建脚手架生成项目
全局安装npm install -g generator-generator
- 使用npm进行发布
link命令本地测试,发布时设置npm registry