一、为什么要构建自己的脚手架
大家都知道，使用脚手架能够帮助我们快速构建项目，目前网上也有很多脚手架，能够满足大家的基本需求。最近，自己研究了一些新的东西，在网上找了许多都不能满足我。所以今天我就使用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 ，具体的可以参看文档。
网友评论