一,前端工程化是什么?

所谓工程: 工程就是一个项目(一个网站或APP)

一个工程的生命周期:

• 工程立项
• 需求分析
• 产品原型
• 开发实施
• 测试部署
• 上线运行

什么是前端工程化

• 前端工程化就是通过各种工具和技术,提升前端开发效率的过程.
  • 前端工程化的内容: 各种工具和技术
  • 前端工程化的作用: 通过使用工具,提升开发效率

前端工程化解决的问题

• 项目代码上线前,代码需要压缩
  • bootstrap.js/bootstrap.min.js
• 想要使用ES6+CSS3新特性,要解决兼容性问题
  • 使用工具去解决兼容性问题
• 想要使用Less去增强CSS的编程性,但是浏览器不能直接支持less
  • 进行编译
• 多人协作开发,代码风格无法统一
  • eslint格式化

工程化!==某个工具

node.js

二,脚手架

脚手架分类

• 通用脚手架
  • yeoman
• 专用脚手架
  • vue-cli
  • create-react-app
  • angular-cli

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

构建自己的脚手架工具

自定义Generator

首先配置Generator需要有严格的文件结构

|_ generators/     ............................. 生成器目录
|   |_ app/        ............................. 默认生成器目录
|      |_ index.js ............................. 默认生成器实现
|_  package.json   ............................. 模块包配置文件

使用yeoman实现自己的脚手架

1. 创建文件结构并且初始化项目

   创建文件夹名字必须是generator-xxx

npm init -y //初始化项目

配置文件结构注意：文件结构名字不能改变

1. 安装yeoman-generator

npm install yeoman-generator

1. 编写index.js文件

const Generator = require("yeoman-generator");const path = require("path");
const fs = require("fs");module.exports = class extends Generator {prompting() {// promisereturn this.prompt([{type: "input",name: "title",message: "Project name:",default: this.appname,},]).then((answers) => {this.answers = answers;});}writing() {// // 创建单个文件// this.fs.write(//     this.destinationPath("temp.txt"),//     Math.random().toString()//     );// // 创建模板文件// const tmpl = this.templatePath("index.html");// const output = this.destinationPath("index.html");// const context = this.answers;// this.fs.copyTpl(tmpl, output, context);//创建多个模板文件const tmpDir = path.join(__dirname, "templates");fs.readdir(tmpDir, (err, files) => {if (err) throw err;files.forEach((file) => {console.log(file);const tmpl = this.templatePath(file);const output = this.destinationPath(file);const context = this.answers;this.fs.copyTpl(tmpl, output, context);});});}
};

1. 挂载全局供其他文件夹去使用命令

npm link//挂载
npm unlink//卸载

这一块 可以使用yarn去挂载 

yarn link//挂载
yarn unlink//卸载

1. 向目标文件夹写文件

yo xxx//这里的xxx是你最外层定义的generator-xxx文件名

到此即可创建成功!!!

脚手架的原理

1. 初始化项目

npm init -y

1. 安装依赖并配置package.json

安装命令提示符交互 inquirer
ejs模板npm i ejs inquirer

//配置bin
{"name": "ncl","version": "1.0.0","description": "","main": "index.js","bin": {"ncl": "`./cli.js`"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","dependencies": {"ejs": "^3.1.8","inquirer": "^8.0.0"}
}

1. cli.js中

#!/usr/bin/env node  //这一块必须写 因为这个文件当成脚本去执行,写在第一行
const fs = require("fs");
const path = require("path");
const inquirer = require("inquirer");
const ejs = require("ejs");inquirer.prompt([{type: "input",name: "title",message: "Project name:",},]).then((answers) => {console.log(answers);// 获取模板路径const tmpDir = path.join(__dirname, "templates");// console.log(tmpDir);// 获取命令符窗口的路径const destDir = process.cwd();// console.log(destDir);fs.readdir(tmpDir, (err, files) => {if (err) throw err;files.forEach((file) => {ejs.renderFile(path.join(tmpDir, file), answers, (err, result) => {if (err) throw err;fs.writeFileSync(path.join(destDir, file), result);});});});});

总结:脚手架其实就是通过读写文件,来实现的