1. 什么是工程
工程就是一个项目（例如：一个网站或者APP）
2. 什么是前端工程化
前端工程化就是通过各种工具和技术，提升前端开发效率的过程。
- 前端工程化的内容：各种工具和技术
- 前端工程化的作用：通过使用工具，提升开发效率
3. 前端工程化的内容
4. 脚手架
1. 脚手架创建项目基础结构：
2. 脚手架类别：
3. 学习一下yeoman
yeoman的基本概念：
- yeoman是一款脚手架工具
-
- 可以帮助开发人员创建项目的基础结构代码
- yo是yeoman的命令行管理工具
-
- 可以在命令行运行yeoman的命令
- 生成器：yeoman中具体的脚手架
-
- 针对不同的项目有不同的脚手架（例如：网站，小程序，APP等）
yeoman使用说明：
- 全局安装yo
npm install --global yo
- 安装generator
npm install --global generator-webapp
- 通过yo运行generator
mkdir project-name
cd project-name
yo webapp
- 启动应用
npm run start
构建自己的脚手架工具：简单的
- 先创建一个文件夹，再npm init -y；再创建generators文件夹....
- 安装generator,因为里面封装了很多方法，供我们自定义generator使用。
npm install yeoman-generator
- index.js编写一下代码
// 引入Generator
const Generator = require('yeoman-generator')
module.exports = class extends Generator{
// 脚手架最大的作用就是：生成项目目录文件
// 默认会执行writing方法
writing(){
// this.fs.write() 第一参数文件路径或者文件名；第二个参数往这个文件写什么东西
this.fs.write(this.destinationPath('temp.txt'), Math.random().toString())
}
}
- 具体操作：
- 封装好的Generator挂载到全局： npm link
2. 命令行切换到自己的项目中，执行yo xilingvues(xilingvues是生成器后面的名字)
注 mac系统可能会有权限的问题，命令行加sudo
构建自己的脚手架工具：使用模版及命令行交互
命令行和模版进行交互
简单没有动态获取的情况
- 生成模版文件夹
- index.js或者模版、创建文件、及内容
writing(){
// 获取模版
const tmpl = this.templatePath('index.html')
// 创建文件
const output= this.destinationPath('index.html')
// 替换的内容
const context = {title : '西岭老师'}
// 拷贝模版tmpl, 拷贝到output文件夹下，拷贝内容是context进行替换
this.fs.copyTpl(tmpl, output, context)
}
- 结果展示（在myvuetest执行yo xilingvues）
和命令行进行交互的动态获取
- 生成模版
- 命令交互
module.exports = class extends Generator{
prompting(){
// 返回用户输入的结果
// prompt是一个promise
return this.prompt([
// 一个对象就是一个命令行交互
{
type: 'input', // 类型为用户输入
name: 'title', // 定义用户输入内容的键名
message: '用户输入时的提示信息', // 用户输入时的提示信息
default: this.appname // 默认值为目录名字
}
]).then(answers => {
// 获取用户输入的内容
// answers挂载到对象上
this.answers = answers
})
},
writing(){
// 获取模版
const tmpl = this.templatePath('index.html')
// 创建文件
const output= this.destinationPath('index.html')
// 替换的内容
const context = this.answers
// 拷贝模版tmpl, 拷贝到output文件夹下，拷贝内容是context进行替换
this.fs.copyTpl(tmpl, output, context)
}
}
- 结果展示
使用yeoman创建vue-cli：
- 在模版文件夹下生成vue-cli会生成的文件，把这写文件当成模版
- index.js中的代码
module.exports = class extends Generator{
prompting(){
// 返回用户输入的结果
// prompt是一个promise
return this.prompt([
// 一个对象就是一个命令行交互
{
type: 'input', // 类型为用户输入
name: 'title', // 定义用户输入内容的键名
message: '用户输入时的提示信息', // 用户输入时的提示信息
default: this.appname // 默认值为目录名字
}
]).then(answers => {
// 获取用户输入的内容
// answers挂载到对象上
this.answers = answers
})
},
writing(){
// 模版中的文件夹
const templates = [
'public/favicon.ico',
'public/index.html',
'src/assets/logo.png',
'src/components/HelloWorld.vue',
'src/router/index.js',
'src/store/index.js',
'src/views/About.vue',
'src/views/Home.vue',
'src/App.vue',
'src/main.js',
'.browserslistrc',
'.eslinttrc.js',
'.gitignore',
'babel.config.js',
'package.json',
'README.md'
]
templates.forEach(item => {
this.fs.copyTpl(
this.templatePath(item), // 模版文件
this.destinationPath(item), // 拷贝模版文件后放到哪个文件下
this.answers // 模版中替换的内容
)
})
}
}
- 结果展示： 执行yo xilingvues,执行完成后会创建相应的文件，并且下载相应的依赖。安装好后npm run serve就可以运行项目了
5. 自动化构建
自动化构建是指将手动构建任务，通过命令自动执行的过程
什么是npm scripts
npm 允许在package.json中，使用scripts字段定义脚本命令
npm scripts中任务的执行方式：并行/串行
串行举例：构建样式文件
- 将less转成css
npm i less -g
lessc input.less output.css
- 压缩css文件
npm i minify -g
minify output.css > output.min.css
串行写在scripts下：
自动化构建工具
6. webpack打包工具
为什么会有模块化打包工具
webpack中loader的工作原理
需求一： 自己封装一个loader,将md文件转换成html文件，将html文件打包。
-
- 创建一个文件夹，再执行npm init -y
-
- 安装webpack、webpack-cli
npm install webpack webpack-cli
-
- 编写命令行，执行webpack
- 4. 编写wenpack配置文件：webpack.config.js文件
const path = require('path')
module.exports = {
mode: "none", // 开发、生产、原始模式
entry: "./src/main.js" // 入口文件
output: {
filename: "bundle.js" // 输出文件
},
module: {
rules: [
{
test: /\.md$/, // 匹配.md文件
use: "./markdown-loader" // 匹配的文件使用什么loader进行处理
}
]
}
}
-
- 创建入口文件src/main.js,创建md文件src/about.md,创建loader文件markdown-loader.js
main.js文档代码如下：入口文件 直接能读取about文件
import about from './about.md'
console.log(about)
markdown-loader.js文档代码如下：
安装marked:npm install marked
// loader就是一个函数，loader具体的处理过程。
// 向外暴露一个函数
const marked = require("marked") // marked可以将md文件转换成html
module.exports = (source) => {
// source: 匹配当前loader的文件内容
// 将md文件转换成html
const html = marked(source)
// 将html转换成js语言
const code = `module.exports=${JSON.stringfy(html)}`
// 返回处理好的结果
return code
}
打包的命令：npm run build;
执行bundle.js文件命令： node ./dist/bundle.js
需求二：需要将md转换成html,但是我们自己写的markdown-loader只返回了html,没有再将html转换成js。
此时markdown-loader.js文档代码如下：
const marked = require("marked") // marked可以将md文件转换成html
module.exports = (source) => {
const html = marked(source)
return html
}
webpack.config.js文件代码如下：
下载html-loader: npm install html-loader
module: {
rules: [
{
test: /\.md$/,
// 从下往上走的，谁先执行就放到后面。
use: [
"html-loader", // 将html转换成js
"./markdown-loader"
]
}
]
}
7. vite
vite和vue-cli的区别：
vite:
- 不会进行打包，在本地开发的代码与返回到客户端（浏览器）的代码及文件是一模一样的。（现在的浏览器已经支持原生的模块化语法）
- 启动项目的时间不同，如图所用的运行时间:（哪个文件改了，就直接更新哪个文件）
-
没有打包的后缀名为.vue的文件，浏览器是怎么识别的 响应头设置Content-Type
-
.vue文件中的template标签怎么识别 会转换成js文件
-
为什么vite不需要打包呢？（打包目的是减少http请求） 因为vite会支持http2.0协议版本，http2.0启用了头部压缩和链路复用。除此之外还开起了浏览器缓存
vue-cli:
-
vue-cli打包后再启动项目，只要有一个文件修改了，就会从入口开始，在文件所有的依赖，最后打包成build文件后在启动项目。
- 启动项目的时间不同，如图所用的打包时间:
vite创建项目：
npm init @vitejs/app
npm intstall // 安装依赖
npm run dev // 启动项目 在package.json文件scripts下命令
