一、為什么要構建自己的腳手架
? ? ? ? 大家都知道，使用腳手架能夠幫助我們快速構建項目，目前網上也有很多腳手架，能夠滿足大家的基本需求。最近，自己研究了一些新的東西，在網上找了許多都不能滿足我。所以今天我就使用Yeoman自己搭建一個腳手架，同時發布到npm? 倉庫里。下次在起新的項目時便可快速搭建了。
二、構建腳手架詳細步驟
1、安裝必備工具
a、安裝node
? ? ? ? ? 首先確定你安裝了node和npm，node的版本要求在4.0以上，通過 ?node -v 和 npm ?-v 可查看當前node、npm的版本。node版本若太低，可通過 n 模塊進行管理：
npm ?install-g n ?// 安裝n 模塊
n stable? //升級node.js到最新穩定版
n v8.6.0 ?//n后面也可以跟隨版本號
有些可能需要加sodo ?才有權限安裝
b、安裝 yeoman
sudo npm install -g yo? //安裝 yeoman
yo --version ?//查看版本
2、創建屬于自己的generator
a、創建文件目錄
創建文件夾目錄，文件夾名必須為generator-name，name是你創建的generator的名字。再次以generator-lazy-gift 為例。
注：文件夾名稱必須以generator- 為前綴，否則執行 yo xxx ?初始化項目時會無法找到你的項目模塊。
b、修改package.json
執行 npm init ?創建 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 下的內容；keywords 也必須為yeoman-generator。
c、目錄規范
d、編寫index.js
在app ?目錄下新建index.js ,編輯內容如下：
在此，我的編輯內容如下：
'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,這樣運行yo時，就可以找到這個generator-gulp了。
f、測試
新建項目文件，打開終端，執行yo，可以看到：
至此，你就成功搭建了屬于自己的腳手架了。
三、發布模塊到NPM
1、npm 注冊
npm adduser ?
npm login
npm whoami ?//查看當前 npm 用戶
2、npm module 發布
進入項目根目錄，執行
npm publish
這里有時候會遇到幾個問題,問題1：
npm ERR! no_perms Private mode enable, only admin can publish this module:
這是因為國內網絡問題，許多小伙伴把npm的鏡像代理到淘寶或者別的地方了，這里要設置回原來的鏡像。
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?
提示沒有權限，是因為你的module名在npm上已經被占用啦，這時候你就去需要去npm搜索你的模塊名稱，如果搜索不到，就可以用，并且把package.json里的name修改過來，重新npm publish.
更新版本,在項目根木下的 package.json 修改版本，然后再發布：
{
? ? ? ?"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":{}
}
版本號規范采用的是 ?semver ，具體的可以參看文檔。
