前端工程化 ---- 创建自己的脚手架工具

一,前端工程化是什么?

所谓工程: 工程就是一个项目(一个网站或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() {
    // promise
    return 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);
        });
      });
    });
  });

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