altium designer无法创建工程_前端工程化之开发脚手架及封装自动化构建

工程化笔记 . . 光前端工程化简述简述一切能提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化。模块化，组件化，规范化，自动化.解决的问题传统语

2023-07-03 技术

工程化笔记 .

. 光

前端工程化简述

简述

一切能提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化。

模块化，组件化，规范化，自动化.

解决的问题

传统语言或语法的弊端。

无法使用模块化/组件化。

重复的机械式工作。

代码风格统一，质量保证。

依赖后端服务接口支持。

整体依赖后端项目。

一个项目过程中工程化的表现

创建-》编码-》预览/测试-》提交-》部署

一切重复的工作，都应该被工程化！

工程化不等于工具

一些成熟的工程化集成

工程化与Node.js

没有node就没有今天的前端

脚手架工具

概述

脚手架的本质作用，创建项目基础结构，提供项目规范和约定。

常用的脚手架工具

react create-react-app

vue vue-cli

angular angular-cli

通用形 Yeoman

固定目录形式 Plop

Yeoman简介

Yeoman基础使用

你要提前安装好 node , npm/yarn

全局范围安装yocnpm install -g yo安装对应的generator (这里以想创建node项目的脚手架为例)cnpm install generator-node -g通过yo运行generatormkdir my-moduleyo node最后通过命令行交互填写项目结构，一些描述，作者什么的

Sub Generator

有时候我们只是在原有的项目上添加些配置文件，例如eslint配置文件，bable配置文件等，这些文件都有些基础代码，如果自己手动配的话也容易出错，这就需要生成器自动帮我们生成，这种需求就适合通过Sub Generator来实现。

cd my-moduleyo node:readme

Yeoman使用步骤总结

明确你的需求
找到合适的generator(通过yeoman官网找)
全局范围安装你找到的generator
通过Yo运行此generator
通过命令行交互填写项目结构
生成你所需要的项目结构

自定义Generator

比如vue官方的vue-cli，创建完成后只包含vue结构，

如果我们还想集成vue-router，vuex，

那我们就可以自行搭建自己的脚手架。

创建Generator模块

generator本质上就是一个npm模块

如果想添加Sub Generator，目录就如下

还有Generator的模块名称必须是generator-

mkdir generator-sample && cd generator-sample创建一个package.jsonnpm init这个模块会为我们提供一个generator生成器的基类，基类中提供了一些工具函数，可以让我们写生成器的时候更加便捷npm install yeoman-generator按照上述图的目录标准，创建generators/app/index.js文件

// index.js// 此文件作为 Generator 的核心入口// 需要导出一个继承自 Yeoman Generator 的类型// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入const Generator = require('yeoman-generator')module.exports = class extends Generator {  writing () {    // Yeoman 自动在生成文件阶段调用此方法    // 我们这里尝试往项目目录中写入文件    this.fs.write( // 这个fs不是node模块的fs，这个更强大      this.destinationPath('temp.txt'), // 绝对路径      Math.random().toString() //填入随机数    )  }}

这样一个简单的generator就完成了。

通过命令行把这个模块链接到全局范围，使之成为一个全局模块包npm linkmkdir my-sample && cd my-sampleyo sample=>生成文件啦

根据模板创建文件

大部分时候我们要创建的文件较多也较复杂，

所以我们使用模版，可以更便捷一些

创建template/foo.txt// foo.txt这是一个模板文件内部可以使用 EJS 模板标记输出数据例如：其他的 EJS 语法也支持哈哈哈

writing () {    // 通过模板方式写入文件到目标目录    // 模板文件路径    const tmpl = this.templatePath('foo.txt')    // 输出目标路径    const output = this.destinationPath('foo.txt')    // 模板数据上下文    const context = { title: 'Hello zce~', success: true }    this.fs.copyTpl(tmpl, output, context)}

html也同理

接收用户输入

通过prompting方法，接收命令行交互中用户输入的数据

prompting () {        // Yeoman 在询问用户环节会自动调用此方法        // 在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问        return this.prompt([          {            type: 'input',            name: 'name',            message: 'Your project name',            default: this.appname // appname 为项目生成目录名称          }        ])        .then(answers => {          // answers => { name: 'user input value' }          this.answers = answers        })      }// 在想使用的地方 this.answer.name

Vue Generator案例

。。。。。

发布Generator

generator本质上就是一个npm模块，所以就是发布一个npm模块npm publish

Plop简介

一个小型前端脚手架工具，一般用来创建项目中的同类型文件

Plop的基本使用

脚手架的工作原理

启动它过后，它会自动的去询问你一些预设的问题，然后将你回答的结果，结合模版文件，生成项目的内容。核心代码：

#!/usr/bin/env node// Node CLI 应用入口文件必须要有这样的文件头//意思是指定用node执行脚本文件。// 脚手架的工作过程：// 1. 通过命令行交互询问用户问题// 2. 根据用户回答的结果生成文件const fs = require('fs')const path = require('path')const inquirer = require('inquirer') // 命令行交互模块const ejs = require('ejs')inquirer.prompt([  {    type: 'input',    name: 'name',    message: 'Project name?'  }]).then(anwsers => {  // console.log(anwsers)  // 根据用户回答的结果生成文件  // 模板目录  const tmplDir = path.join(__dirname, 'templates') // __dirname:当前模块的目录名  // 目标目录  const destDir = process.cwd() // Node.js 进程的当前工作目录。  // 将模板下的文件全部转换到目标目录  fs.readdir(tmplDir, (err, files) => {    if (err) throw err    files.forEach(file => {      // 通过模板引擎渲染文件      ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {        if (err) throw err        // 将结果写入目标文件路径        fs.writeFileSync(path.join(destDir, file), result)      })    })  })})

自动化构建

基本使用

源代码自动化构建成生产代码。

使用提高效率的规范，语法，和标准。来进行构建。

初体验

初始化目录结构