前端工程化Yeoman 和 Plop

時間 2021-05-19

標籤 css html 前端 vue node react git github web vue-cli 欄目 Google 简体版

原文原文鏈接

前端工程化

遵循必定標準和規範，經過工具去提升效率，下降成本的一種手段css

工程化是一種規劃架構，工具是實現規劃架構得手段，是工程化的集成html

爲何要使用工程化vue

使用ES6存在兼容問題
使用Less、Sass、PostCSS加強css編程性存在運行環境不支持
使用模塊化方式提升項目可維護性，運行環境不直接支持
部署上線前"手動"壓縮代碼資源，部署過程"手動"上傳代碼到服務器
多人協做開發，沒法硬性統一你們代碼風格，從倉庫pull回得代碼質量沒法保證、

一些成熟的工程化集成node

腳手架工具（前端工程化的發起者）

本質做用：建立項目基礎結構，提供項目規範和約定react

約定體如今git

相同的組織結構
相同的開發範式
相同的模塊依賴
相同的工具配置
相同的基礎代碼

有些IDE建立項目的過程能夠看做是工程化，例如Android Studiogithub

經常使用腳手架web

create-react-app ， vue-cli ， angular-cli 根據信息建立對應項目基礎結構適用於自身服務的框架
Yeoman 通用型項目腳手架工具
Plop 項目中建立特定類型文件

Yeoman

建立現代化web應用的腳手架工具vue-cli

全局範圍安裝yo

yarn global add yo ， npm i yo -g

安裝對應的generator 例如：

yarn global add generator-node ， npm i generator-node -g

經過yo運行generator

yo node
* 填寫腳手架內容

Sub Generator

在已有的項目基礎上建立特定類型文件

如項目上添加README，ESlint，Bable配置文件，用生成器自動生成

例如：在generator-node建立的項目裏添加node子集生成器cli，並非都有子集生成器，根據官網查看

yo node:cli            建立cli應用所須要的文件
my-module --help

Yeoman使用步驟總結

明確需求
找到合適的Generator
全局範圍安裝找到的Generator
經過yo 運行對應的Generator
經過命令行交互填寫選項
生成你所須要的項目結構
找到對應generator

例如：建立一個網頁應用webapp

* yarn global add generator-webapp
 * yo webapp   (相似於 yo node 安裝generator-node)

自定義Generator

基於Yeoman搭建本身的腳手架，本質上Generator就是一個NPM模塊

自定義的Generator知足結構

自定義的名稱必須是 generator-name

接收用戶輸入動態數據

經過命令行交互方式去詢問使用者，從而獲得使用者想要的項目腳手架

const Generator = require('yeoman-generator')

module.exports = class extends Generator{

  prompting(){

    //Yeoman 在詢問用戶環節會自動調用此方法
    //在此方法中能夠調用父類的 prompt() 方法發出對用戶的命令行詢問

    return this.prompt([ //數組的每項都是問題對象

      {
        type:'input', //輸入方式接收用戶提交信息
        name:'title',  //鍵
        message:'Your project name', //界面給用戶提示問題
        default: this.appname //父類中自動幫咱們拿到的當前項目生成目錄文件夾的名字（默認值）
      }

    ])
    .then(answers=>{
      //answers =>{name:'user input value;'} 就是上面的name：title

      this.answers = answers
    })
  }
  writing(){
    
    const tmpl = this.templatePath('bar.html')

    const output = this.destinationPath('bar.html')

    const context = this.answers   //{title:'Hello mc',success:false}修改成this.answers接收用戶輸入內容爲模板上下文

    this.fs.copyTpl(tmpl,output,context)
  }
}

yo sample 執行

發佈Generator

實際上就是發佈一個npm模塊

發佈要註冊npm帳號，並郵箱驗證
發佈命令 yarn publish，輸入npm帳號密碼,輸入錯誤yarn logout能夠從新填寫
運行失敗解決：yarn publish --registry=https://registry.yarnpkg.com
發佈到的地址：https://www.npmjs.com/package/xxx

Plop

建立項目中特定類型文件的腳手架工具，相似於Yeoman中的Sub Generator

提升建立重複文件的效率

yarn add plop --dev
根目錄添加 plopfile.js 入口文件

plopfile.js介紹

plopfile 須要導出一個函數,此函數接收一個plop對象，用於建立生成器任務

module.exports = prop =>{

  plop.setGenerator('component',{ //參數1：生成器名字，參數2生成器配置選項對象
    description:'create a component',

    prompts:[   //問詢交互
      {
        type:'input',
        name:'name', //鍵
        messsage:'component name', //問題
        default:'MyComponent' //默認答案
      }
    ],

    actions:[ //生成器動做，也就是要生成的文件配置
      {
        type:'add', //添加一個文件
        path:'src/components/{{name}}/{{name}}.js', //添加路徑
        templateFile:'src/plop-templates/component.hbs' //模板文件
      }
    ]

  })
}