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