工程化筆記 .??. 光

前端工程化簡述

簡述

一切能提升前端開發(fā)效率，提高前端應(yīng)用質(zhì)量的手段和工具都是前端工程化。

模塊化，組件化，規(guī)范化，自動化.

解決的問題

傳統(tǒng)語言或語法的弊端。

無法使用模塊化/組件化。

重復(fù)的機械式工作。

代碼風格統(tǒng)一，質(zhì)量保證。

依賴后端服務(wù)接口支持。

整體依賴后端項目。

一個項目過程中工程化的表現(xiàn)

創(chuàng)建-》編碼-》預(yù)覽/測試-》提交-》部署

一切重復(fù)的工作，都應(yīng)該被工程化！

工程化不等于工具

一些成熟的工程化集成

工程化與Node.js

沒有node就沒有今天的前端

腳手架工具

概述

腳手架的本質(zhì)作用，創(chuàng)建項目基礎(chǔ)結(jié)構(gòu)，提供項目規(guī)范和約定。

常用的腳手架工具

react? create-react-app

vue??vue-cli

angular? ?angular-cli

通用形? ?Yeoman

固定目錄形式? ?Plop

Yeoman簡介

Yeoman基礎(chǔ)使用

你要提前安裝好 node? , npm/yarn

全局范圍安裝yocnpm install -g yo安裝對應(yīng)的generator (這里以想創(chuàng)建node項目的腳手架為例)cnpm install generator-node -g通過yo運行g(shù)eneratormkdir my-moduleyo node最后通過命令行交互填寫項目結(jié)構(gòu)，一些描述，作者什么的

Sub?Generator

有時候我們只是在原有的項目上添加些配置文件，例如eslint配置文件，bable配置文件等，這些文件都有些基礎(chǔ)代碼，如果自己手動配的話也容易出錯，這就需要生成器自動幫我們生成，這種需求就適合通過Sub Generator來實現(xiàn)。

cd my-moduleyo node:readme

Yeoman使用步驟總結(jié)

明確你的需求

找到合適的generator(通過yeoman官網(wǎng)找)

全局范圍安裝你找到的generator

通過Yo運行此generator

通過命令行交互填寫項目結(jié)構(gòu)

生成你所需要的項目結(jié)構(gòu)

自定義Generator

比如vue官方的vue-cli，創(chuàng)建完成后只包含vue結(jié)構(gòu)，

如果我們還想集成vue-router，vuex，

那我們就可以自行搭建自己的腳手架。

創(chuàng)建Generator模塊

generator本質(zhì)上就是一個npm模塊

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

還有Generator的模塊名稱必須是generator-

mkdir generator-sample && cd generator-sample創(chuàng)建一個package.jsonnpm init這個模塊會為我們提供一個generator生成器的基類，基類中提供了一些工具函數(shù)，可以讓我們寫生成器的時候更加便捷npm install yeoman-generator按照上述圖的目錄標準，創(chuàng)建generators/app/index.js文件// index.js// 此文件作為 Generator 的核心入口// 需要導出一個繼承自 Yeoman Generator 的類型// Yeoman Generator 在工作時會自動調(diào)用我們在此類型中定義的一些生命周期方法// 我們在這些方法中可以通過調(diào)用父類提供的一些工具方法實現(xiàn)一些功能，例如文件寫入const Generator = require('yeoman-generator')module.exports = class extends Generator { writing () { // Yeoman 自動在生成文件階段調(diào)用此方法 // 我們這里嘗試往項目目錄中寫入文件 this.fs.write( // 這個fs不是node模塊的fs，這個更強大 this.destinationPath('temp.txt'), // 絕對路徑 Math.random().toString() //填入隨機數(shù) ) }}

這樣一個簡單的generator就完成了。

通過命令行把這個模塊鏈接到全局范圍，使之成為一個全局模塊包npm linkmkdir my-sample && cd my-sampleyo sample=>生成文件啦

根據(jù)模板創(chuàng)建文件

大部分時候我們要創(chuàng)建的文件較多也較復(fù)雜，

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

創(chuàng)建template/foo.txt// foo.txt這是一個模板文件內(nèi)部可以使用 EJS 模板標記輸出數(shù)據(jù)例如：其他的 EJS 語法也支持哈哈哈writing () { // 通過模板方式寫入文件到目標目錄 // 模板文件路徑 const tmpl = this.templatePath('foo.txt') // 輸出目標路徑 const output = this.destinationPath('foo.txt') // 模板數(shù)據(jù)上下文 const context = { title: 'Hello zce~', success: true } this.fs.copyTpl(tmpl, output, context)}

html也同理

接收用戶輸入

通過prompting方法，接收命令行交互中用戶輸入的數(shù)據(jù)

prompting () { // Yeoman 在詢問用戶環(huán)節(jié)會自動調(diào)用此方法 // 在此方法中可以調(diào)用父類的 prompt() 方法發(fā)出對用戶的命令行詢問 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案例

。。。。。

發(fā)布Generator

generator本質(zhì)上就是一個npm模塊，所以就是發(fā)布一個npm模塊npm publish

Plop簡介

一個小型前端腳手架工具，一般用來創(chuàng)建項目中的同類型文件

Plop的基本使用

..

腳手架的工作原理

啟動它過后，它會自動的去詢問你一些預(yù)設(shè)的問題，然后將你回答的結(jié)果，結(jié)合模版文件，生成項目的內(nèi)容。核心代碼：

#!/usr/bin/env node// Node CLI 應(yīng)用入口文件必須要有這樣的文件頭//意思是指定用node執(zhí)行腳本文件。// 腳手架的工作過程：// 1. 通過命令行交互詢問用戶問題// 2. 根據(jù)用戶回答的結(jié)果生成文件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) // 根據(jù)用戶回答的結(jié)果生成文件 // 模板目錄 const tmplDir = path.join(__dirname, 'templates') // __dirname:當前模塊的目錄名 // 目標目錄 const destDir = process.cwd() // Node.js 進程的當前工作目錄。 // 將模板下的文件全部轉(zhuǎn)換到目標目錄 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 // 將結(jié)果寫入目標文件路徑 fs.writeFileSync(path.join(destDir, file), result) }) }) })})

自動化構(gòu)建

基本使用

源代碼自動化構(gòu)建成生產(chǎn)代碼。

使用提高效率的規(guī)范，語法，和標準。來進行構(gòu)建。

初體驗

初始化目錄結(jié)構(gòu)

安裝sass?模塊

NPM?SCRIPT

優(yōu)化重復(fù)執(zhí)行命令 scripts 里面可以自動發(fā)現(xiàn) node_modules 里面的命令?

不需要定義完整的運行路徑

實現(xiàn)自動化構(gòu)建最簡單的方式

// 運行yarn build

還不夠完美 我們想實時編譯 構(gòu)建

所以安裝一個?browser 啟動一個服務(wù)器

yarn add browser-sync --dev

在scripts 里面添加一個啟動命令

運行? 不出意外會啟動 localhost:3000 的路徑 打開 index.html

yarn serve

我們需要在啟動之前構(gòu)建好css 才可以??可以使用scripts 的鉤子?

我們還可以給scss?命令添加一個 --watch 的命令?

會監(jiān)聽我們的文件的變化

一旦?文件改變就會自動被編譯。

但是這樣運行我們會被暫停導致?browser-sync 無法直接去工作

我們可以借助 npm-run-all?的模塊同時執(zhí)行多個命令

安裝

yarn add npm-run-all --dev

運行

yarn?start?

給serve 命令添加 --files 參數(shù)監(jiān)聽文件變化

將文件內(nèi)容自動同步到瀏覽器

總結(jié)

以上是生活随笔為你收集整理的altium designer无法创建工程_前端工程化之开发脚手架及封装自动化构建的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。