一瑰剃、為什么要構(gòu)建自己的腳手架
? ? ? ? 大家都知道，使用腳手架能夠幫助我們快速構(gòu)建項目筝野，目前網(wǎng)上也有很多腳手架晌姚，能夠滿足大家的基本需求粤剧。最近，自己研究了一些新的東西挥唠，在網(wǎng)上找了許多都不能滿足我抵恋。所以今天我就使用Yeoman自己搭建一個腳手架，同時發(fā)布到npm? 倉庫里宝磨。下次在起新的項目時便可快速搭建了弧关。
二、構(gòu)建腳手架詳細(xì)步驟
1唤锉、安裝必備工具
a世囊、安裝node
? ? ? ? ? 首先確定你安裝了node和npm，node的版本要求在4.0以上窿祥，通過 ?node -v 和 npm ?-v 可查看當(dāng)前node株憾、npm的版本。node版本若太低晒衩，可通過 n 模塊進(jìn)行管理：
npm ?install-g n ?// 安裝n 模塊
n stable? //升級node.js到最新穩(wěn)定版
n v8.6.0 ?//n后面也可以跟隨版本號
有些可能需要加sodo ?才有權(quán)限安裝
b嗤瞎、安裝 yeoman
sudo npm install -g yo? //安裝 yeoman
yo --version ?//查看版本
2、創(chuàng)建屬于自己的generator
a听系、創(chuàng)建文件目錄
創(chuàng)建文件夾目錄猫胁，文件夾名必須為generator-name，name是你創(chuàng)建的generator的名字跛锌。再次以generator-lazy-gift 為例弃秆。
注：文件夾名稱必須以generator- 為前綴，否則執(zhí)行 yo xxx ?初始化項目時會無法找到你的項目模塊髓帽。
b菠赚、修改package.json
執(zhí)行 npm init ?創(chuàng)建 package.json。完成后添加以下項郑藏，然后通過 npm ?i ?安裝項目依賴項衡查。
"files":[
? ? ? ?"app"
],
"keywords":[
? ? ? ?"yeoman-generator"
],
"dependencies":{
? ? ? ? "chalk":"^2.1.0",
? ? ? ? "yeoman-generator":"^2.0.1",
? ? ? ? "yosay":"^2.0.1"
}
注：files 名稱需和項目目錄文件名一致，比如這里的app必盖，項目初始化時便能找到app 下的內(nèi)容拌牲；keywords 也必須為yeoman-generator。
c歌粥、目錄規(guī)范
d塌忽、編寫index.js
在app ?目錄下新建index.js ,編輯內(nèi)容如下：
在此，我的編輯內(nèi)容如下：
'use strict';
const Generator = require('yeoman-generator');
const chalk = require('chalk');
const yosay = require('yosay');
module.exports=class extends Generator {
? ? ? prompting() {
? ? ? ? ? this.log(yosay(
? ? ? ? ? ? ? ? ? ? ?'Welcome to the prime '+ chalk.red('generator-lazy-gift') +' generator!'
? ? ? ? ? ));
? ? ? ? ? const prompts = [{
? ? ? ? ? ? ? ? ? ? type:'input',
? ? ? ? ? ? ? ? ? ? name:'appName',
? ? ? ? ? ? ? ? ? ? message:'What is your project name ?',
? ? ? ? ? ? ? ? ? ? default:"lazy-gift"
? ? ? ? ? }];
? ? ? ? ? return this.prompt(prompts).then(props => {
? ? ? ? ? ? ? ? ? ? this.props= props;
? ? ? ? ? });
}
writing() {
? ? ? ? this.fs.copy(
? ? ? ? ? ? ? ? ?this.templatePath('lazy-gift-server/'),
? ? ? ? ? ? ? ? ?this.destinationPath('lazy-gift-server/')
? ? ? );
? ? ?this.fs.copy(
? ? ? ? ? ? ? ?this.templatePath('lazy-gift-ui/'),
? ? ? ? ? ? ? ?this.destinationPath('lazy-gift-ui/')
? ? );
? ? ?this.fs.copy(
? ? ? ? ? ? ? this.templatePath('.babelrc'),
? ? ? ? ? ? ? this.destinationPath('.babelrc')
? ? ?);
?}
};
e失驶、軟連接項目模塊
npm link
將generator-gulp軟連接到你的usr/local/lib/node_modules/generator-gulp,這樣運(yùn)行yo時土居，就可以找到這個generator-gulp了。
f、測試
新建項目文件擦耀，打開終端棉圈，執(zhí)行yo，可以看到：
至此眷蜓，你就成功搭建了屬于自己的腳手架了分瘾。
三、發(fā)布模塊到NPM
1吁系、npm 注冊
npm adduser ?
npm login
npm whoami ?//查看當(dāng)前 npm 用戶
2德召、npm module 發(fā)布
進(jìn)入項目根目錄，執(zhí)行
npm publish
這里有時候會遇到幾個問題,問題1：
npm ERR! no_perms Private mode enable, only admin can publish this module:
這是因為國內(nèi)網(wǎng)絡(luò)問題垮抗，許多小伙伴把npm的鏡像代理到淘寶或者別的地方了氏捞，這里要設(shè)置回原來的鏡像碧聪。
npm config setregistry=http://registry.npmjs.org
問題2：
npm ERR! you do not have permission to publish "your module name".Are you log gedinas the correctuser?
提示沒有權(quán)限冒版，是因為你的module名在npm上已經(jīng)被占用啦，這時候你就去需要去npm搜索你的模塊名稱逞姿，如果搜索不到晒奕，就可以用芦圾，并且把package.json里的name修改過來，重新npm publish.
更新版本,在項目根木下的 package.json 修改版本，然后再發(fā)布：
{
? ? ? ?"name":"generator-lazy-gift",
? ? ? ?"version":"1.0.2", ? ?// 修改版本號為1.0.2
? ? ? ?"description":"My generator",
? ? ? ? "files":[
? ? ? ? ? ? ? ? "app"
? ? ? ? ?],
? ? ? ? "main":"index.js",
? ? ? ? "scripts":{
? ? ? ? ? ? ? "test":"echo\"Error: no test specified\"&& exit 1"
? ? ? ? },
? ? ? ? "keywords":[
? ? ? ? ? ? ? ?"yeoman-generator"
? ? ? ? ?],
? ? ? ?"author":"sulihua",
? ? ? ? ?"license":"ISC",
? ? ? ? ? "dependencies":{
? ? ? ? ? "chalk":"^2.3.0",
? ? ? ? ?"yeoman-generator":"^2.0.1",
? ? ? ? ? "yosay":"^2.0.1"
},
? ? ? ?"devDependencies":{}
}
版本號規(guī)范采用的是 ?semver 晰韵，具體的可以參看文檔。
