国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

使用yeoman構建angular應用的方法

來源:懂視網 責編:小采 時間:2020-11-27 22:32:57
文檔

使用yeoman構建angular應用的方法

使用yeoman構建angular應用的方法:本文將介紹如何親手來完成一個yeoman的generator,以實現快速構建最適合自己的項目。 本文將實現的generator起名為ngtimo,依照yeoman的命名規矩就叫做generator-ngtimo,是筆者這周末一晚上加一上午參考著yeoman官方給出的幾個generator(g
推薦度:
導讀使用yeoman構建angular應用的方法:本文將介紹如何親手來完成一個yeoman的generator,以實現快速構建最適合自己的項目。 本文將實現的generator起名為ngtimo,依照yeoman的命名規矩就叫做generator-ngtimo,是筆者這周末一晚上加一上午參考著yeoman官方給出的幾個generator(g

本文將介紹如何親手來完成一個yeoman的generator,以實現快速構建最適合自己的項目。
本文將實現的generator起名為ngtimo,依照yeoman的命名規矩就叫做generator-ngtimo,是筆者這周末一晚上加一上午參考著yeoman官方給出的幾個generator(generator-generator、generator-node)給強行催生出來的,目前也已經在github上托管并發布到npm。

實現效果

首先確保已經全局安裝了yeoman,然后再全局安裝generator-ngtimo:

npm install -g generator-ngtimo

安裝完成后即可使用yo命令來進行構建:

yo ngtimo

然后順利的話yeoman會像下面這樣詢問一系列構建的配置,這里筆者選擇輸入項目名稱為ng-test剩下的一路敲回車:

順利的話如下圖這樣的項目結構就誕生了,可以 cd 到項目目錄下(自動執行的 npm install 失敗的話再手動
npm install 一下),并運行 npm run server 啟動項目查看效果。

如果只是想要使用yeoman來快速進行項目搭建的話,只需要找到一個喜歡的generator,像上文這樣全局安裝然后yo它就可以了!不過只是使用別人的generator會有些不自由而且考驗對方的維護能力,就像筆者這個一時興起的ngtimo就才剛剛有了一個主模板而已,還需要做很多改進和迭代。

如果想要自己來編寫一個generator其實難度也非常小,yeoman官方甚至給出了一個generator-generator來幫助我們創建一個generator,筆者這個不成器的ngtimo也是yo generator給yo出來然后加以養成的 :)。

yeoman generator基本項目結構

不想自己從零開始寫一個generator的話強烈推薦使用yeoman官方的generator-generator先把基本結構構建出來:

npm install -g generator-generator
yo generator

yeoman的generator說白也只是一個npm包,主要依賴yeoman-generator包來制定構建規則,這里給出ngtimo的基本目錄結構:

構建規則

現在主要著眼于generators/app/index.js,此文件是最主要的角色,定義了ngtimo要如何處理模板,如何與用戶交互等。筆者目前也只是照著比較成熟的generator在使用,存在片面之處還請包涵。

總覽index.js

整個index.js將導出一個擴展了yeoman-generator的類,就像這樣:

const Generator = require('yeoman-generator');
// ...
module.exports = class extends Generator {
 prompting() {
 // ...
 }
 default() {
 // ...
 }
 writing() {
 // ...
 }
 install() {
 // ...
 }
}

內部的這四個方法各有用處。

一、prompting方法

用于與用戶進行交互,即在yo項目的時候,這老頭會啰啰嗦嗦問我們很多問題,這些問題就是在這里配置的。

對于這個方法筆者選擇的套路是如下三部曲:

先讓老頭向用戶問聲好

const yosay = require('yosay');
// ...
this.log(yosay(
 'Welcome to the astonishing ' + chalk.red('generator-ngtimo') + ' generator!'
));

以上代碼效果就是老頭會代我們問候(褒義)一下用戶:

把一連串問題先配置好

const prompts = [{
 type: 'input',
 name: 'appName',
 message: 'Your project name(你的項目名稱)',
 default: this.appname
}, {
 type: 'confirm',
 name: 'addCommon',
 message: 'Would you like to add some common code(include CoreModule, SharedModule, Router)?\n(要自動創建額外的常用內容嗎, 包含了核心模塊、共享模塊和路由能力)',
 default: true
}];

這里就列舉了兩類問題,一類是客觀題,讓用戶輸入要構建的項目名稱,另一類是判斷題,詢問用戶是否添加一些額外的常用代碼,還有一類沒有使用到的是選擇題,還蠻有趣的。

把這個問題數組返回給老頭

問題數組配置好了,現在要把它交給老頭保管,做法如下:

return this.prompt(prompts).then(props => {
 // 用戶交互完成后把得到的配置設置到參數中
 this.props = props;
});

效果就是當用戶做完這些題目后回答會配置給props變量,在后面的寫如內容環節就可以根據用戶的答案來有選擇的創建項目了。

二、default方法

筆者一開始沒有配置這個方法,是在測試構建時發現沒辦法給目標項目套一個頂層目錄時參考官方generator加上的,猜測是可以用來執行一些默認行為,比如自動給目標項目創建一個頂層目錄,像這樣:

const path = require('path');
const mkdirp = require('mkdirp');
// ...
default() {
 if (path.basename(this.destinationPath()) !== this.props.appName) {
 this.log(
 '發現你不是在 ' + this.props.appName + ' 目錄下構建\n' +
 '我將主動創建此目錄.(created folder with app name)'
 );
 mkdirp(this.props.appName);
 this.destinationRoot(this.destinationPath(this.props.appName));
 }
}

三、writing方法

此方法即用來把實際項目按照指定規則給寫出來,主要有兩種寫法: 直接復制指定模板以及傳入參數渲染出目標文件。

方式一: 直接拷貝

this.fs.copy(
this.templatePath('模板位置'),
this.destinationPath('目標位置')
);

方式二: 傳入參數渲染模板

this.fs.copyTpl(
this.templatePath('模板位置'),
this.destinationPath('目標位置'),
{

參數名: 值
}
);

比如說,在index.js的同級目錄下的templates目錄下有一個文件叫text.txt, 使用方法一將模板位置和目標位置都寫text.txt,老頭就會直接復制這個text.txt作為輸出;而如果使用方法二,模板位置和目標位置不變,并傳入參數{ hello: '你好啊'},在text.txt中就使用ejs語法寫上<%=hello%>,最終老頭同樣會輸出一個test.txt文件,不一樣的是里面的內容被渲染成了"你好啊"。

對此方法的總結就是根據需要使用copy或copyTpl進行輸出,其中copyTpl中的渲染使用ejs語法進行,而模板文件就都放在index.js的同級templates目錄里邊。

四、install方法

此方法即用來自動執行依賴的安裝,沒什么特別的,就是在構建完成后自動幫你npm install和bower install,也可以禁用其中一種:

install() {
 this.installDependencies({bower: false});
}

效果就是下圖這句話了:

發布generator到npm

發布之前可以先使用npm link映射到本地進行測試:

npm link
yo ngtimo

確認無誤后,發布流程就是一句代碼的事(記得定好版本,且更新發布時記得更新版本號):

npm publish

以上這篇使用yeoman構建angular應用的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

使用yeoman構建angular應用的方法

使用yeoman構建angular應用的方法:本文將介紹如何親手來完成一個yeoman的generator,以實現快速構建最適合自己的項目。 本文將實現的generator起名為ngtimo,依照yeoman的命名規矩就叫做generator-ngtimo,是筆者這周末一晚上加一上午參考著yeoman官方給出的幾個generator(g
推薦度:
標簽: 應用 構建 angular
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 欧美综合自拍亚洲综合 | 国产一区91| 一区二区三区久久 | 中文在线第一页 | 国产精选在线视频 | 91精品推荐 | 欧美a色爱欧美综合v | 国产精品麻豆 | 欧美综合另类 | 欧美日本一道本 | 国产一区二区三区免费 | 特黄特黄aaaa级毛片免费看 | 日韩在线第二页 | 自拍 欧美 在线 综合 另类 | 久久综合爱 | 性久久久久久久久 | 91发布页| 日韩欧美在线综合网 | 老色99久久九九精品尤物 | 欧美国产日韩一区二区三区 | 91精品成人免费国产 | 久久er99热精品一区二区 | 天堂一区二区三区精品 | 一级毛片一级毛片一级级毛片 | 国产成人综合一区精品 | 精品国产一二三区在线影院 | 久久久久久久国产a∨ | 日韩大片在线观看 | 国产91精品久久久久久久 | 欧美 日韩 中文 | 不卡一级aaa全黄毛片 | 国产成人精品日本亚洲语音2 | 久久er99| 亚洲一区二区综合 | 久久99国产精品成人欧美 | 亚洲最新偷拍 | 国产日皮视频 | 一区二区电影 | 极品美女一区二区三区 | 一区高清 | 国产精品免费_区二区三区观看 |