工程化筆記 .??. 光

前端工程化簡述

簡述

一切能提升前端開發效率，提高前端應用質量的手段和工具都是前端工程化。

模塊化，組件化，規范化，自動化.

解決的問題

傳統語言或語法的弊端。

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

重復的機械式工作。

代碼風格統一，質量保證。

依賴后端服務接口支持。

整體依賴后端項目。

一個項目過程中工程化的表現

創建-》編碼-》預覽/測試-》提交-》部署

一切重復的工作，都應該被工程化！

工程化不等于工具

一些成熟的工程化集成

工程化與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) }) }) })})

自動化構建

基本使用

源代碼自動化構建成生產代碼。

使用提高效率的規范，語法，和標準。來進行構建。

初體驗

初始化目錄結構

安裝sass?模塊

NPM?SCRIPT

優化重復執行命令 scripts 里面可以自動發現 node_modules 里面的命令?

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

實現自動化構建最簡單的方式

// 運行yarn build

還不夠完美 我們想實時編譯 構建

所以安裝一個?browser 啟動一個服務器

yarn add browser-sync --dev

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

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

yarn serve

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

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

會監聽我們的文件的變化

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

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

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

安裝

yarn add npm-run-all --dev

運行

yarn?start?

給serve 命令添加 --files 參數監聽文件變化

將文件內容自動同步到瀏覽器

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。