大前端学习记三前端工程化

此学习笔记主要是根据XX网大前端课程学习时的笔记整理。

一 前端工程化

1.1 前端工程化

       前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，包括开发流程、技术选型、构建发布等，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间。

1.1.1 什么是前端工程化

1.1.2 为什么要前端工程化

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

1.1.3 怎么做前端工程化

1.2 常用工具

1.2.1 webpack

	// 初始化项目
	npm init -y // 生成一个默认 的package.json文件
	
	// 安装
	// 项目中安装
	npm install webpack webpack-cli -D
	// 全局安装
	npm install webpack webpack-cli -g
	
	// 查看安装的版本
	// 方式一
	./node_modules/.bin/webpack --version // 在项目根目录下运行
	// 方式二
	npx webpack --version 

注意

关键词entry、output

webpack配置文件webpack.config.js

node的路径相关

使用require进行引入

output中path需要使用绝对路径

path、join去拼接路劲，nodejs全局变量_dirname获取当前配置文件的绝对路径

关键词loaders、plugins

text去匹配文件、loader倒叙加载流水线处理

plugin的使用，热模块更替

安装plugin的依赖，在plugins属性中new一个plugin

webpack-dev-server

引入HMR插件，修改文件的时候，自动刷新页面

1.2.2 gulp

特点

• 易于使用、学习
• 构建快速
• 完善的生态系统

基本配置

	安装插件：
	// browser-sync 热更新插件
	npm install gulp-sass gulp-autoprefixer gulp-load-plugins gulp-uglify del browser-sync -D

	gulpfile.js内配置

	// src查找目录下文件
	// 输出地址
	const { src, dest, series, watch } = require('gulp')
	// 引入热更新插件
	const browserSync = require('browser-sync').create()
	const reload = browserSync.reload
	// 删除目录下文件
	const del = require('del)
	// 引入便捷引入插件
 	// 只能引入gulp-插件 gulp-uglify => plugins.uglify  等价 require('gulp-uglify)
 	const plugins = require('gulp-load-plugins')()
 	
	// 压缩js
	function js(cb) {
		src('js/*.js')
			// 下一个处理环节
			.pipe(plugins.uglify())
			.pipe(dest('./dist/js'))
			.pipe(reload({stream: true}))
		cb()
	}
	
	// css处理
	function css(cb) {
		src('css/*.scss')
			.pipe(plugins.sass({outputStyle: 'compressed'}))
			.pipe(plugins.autoprefixer({
				cascade: false,
				remove: false
			})
			.pipe(dest('./dist/css'))
			.pipe(reload({stream: true}))
		cb()
	}
	
	// 删除dist目录下文件
	function clean(cb) {
		del('./dist')
		cb()
	}

	// 监听数据变化
	function watcher() {
		watch('js/*.js', js)
		watch('css/*.scss', css)
	}
	
	// server 任务
	function serve(cb) {
		browserSync.init({
			server:{
				baseDir:'./'
			}
		})
		cb()
	}
	
	exports.scripts = js
	exports.styles = css
	exports.clean = clean
	exports.default = series([
		clean,
		js,
		css,
		serve,
		watcher
	])
	

	npx gulp --tasks // 可以看到所定义的任务

	然后输出npx gulp <任务名>即可执行相对应的项目
	npm run build 在项目中执行文件(在package.json中添加`build:gulp`)

1.3 Yoeman（快速形成工程化项目）

创建属于自己的脚手架

	// 安装
	npm install -g yo
	
	// 构建了一个generator-generator快速创建脚手架生成项目
	// 安装generator-generator
	npm install -g generator-generator

	// 运行
	yo generator

	生成文件如何所示
	把自定义的框架数据替换`templates`下文件

	添加依赖，修改`index.js`中`writing`下数据
	禁止使用bower，在`install`中添加配置
	修改后数据如图

	在项目目录下打开终端工具，运行`npm link`，把依赖链接到全局
	在新文件夹中打开终端工具，运行`npm 项目名称（去除generator-）` ，创建的项目就是自定义的框架
	发布npm官网（注意需要设置registry，使用npm的源，不要使用淘宝源）