Yeoman，搭建、发布自己的脚手架

一、为什么要构建自己的脚手架

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