generator-react-wutao v1.0.1

Yeoman搭建脚手架 eg: generator-react-wutao

安装全局依赖

npm install -g yo

安装插件

cd generator-react-wutao
npm install -S chalk yeoman-generator yosay

mkdir app && cd app
touch index.js
mkdir templates
index.js 脚手架生成器配置
app/templates 文件夹为脚手架模板文件夹，把你想要做成脚手架的项目根目录下的文件，都丢到tamplates目录下

index.js 内容

var path = require('path');
var chalk = require('chalk');
var util = require('util');

var Generator = require('yeoman-generator');
var yosay = require('yosay');
var path = require('path');

// 导出模块，使得yo xxx能够运行
module.exports = class extends Generator {
    initializing() {
        this.props = {};
    }
    // 询问用户，根据答案生成不同模板的脚手架
    prompting() {
        var questions = [
            {
                type: 'input',
                name: 'name',
                message: 'package name',
                default: 'react-project',
            },
            {
                type: 'input',
                name: 'version',
                message: 'version',
                default: '1.0.0',
            },
            {
                type: 'input',
                name: 'description',
                message: 'description',
                default: 'a react project ...',
            },
            {
                type: 'input',
                name: 'author',
                message: 'author',
                store: true, // 记住用户的选择
                default: 'wutao1818',
            },
        ];

        return this.prompt(questions).then(function(answers) {
            for (var item in answers) {
                // 把answers里的内容绑定到外层的this，便于后面的调用
                answers.hasOwnProperty(item) && (this.props[item] = answers[item]);
            }
        }.bind(this));
    }
    // 拷贝文件，搭建脚手架
    writing() {
        const files = [
          'config',
          'public',
          'scripts',
          'src',
          '.flowconfig',
          '.gitignore',
          'package.json',
          'package-lock.json',
          'README.md',
          'yarn.lock'
    ];

    for (var i = 0; i < files.length; i++) {
        var f = files[i];
        if (f == '.gitignore') {
            var file = this.templatePath('.npmignore');
            if (file) {
              this.fs.copy(this.templatePath('.npmignore'), this.destinationPath('.gitignore'));
            } else {
              this.fs.copy(this.templatePath(f), this.destinationPath(f));  
            }
            continue;
          }
        this.fs.copy(this.templatePath(f), this.destinationPath(f));
    }

    // copyTpl 可以渲染变量
    this.fs.copyTpl(this.templatePath('package.json'), this.destinationPath('package.json'), {
        name: this.props.name,
        version: this.props.version,
        description: this.props.description,
        author: this.props.author,
    });
    }
    // 生成脚手架后，进行的一些处理
    end() {
        this.log(yosay('Your app has been created successfully!'));
    }
};

最后

本地先测试包是否正确
cd generator-react-wutao
npm link  此处意思是，本地改了npm的源码包，将本地npm建立联系，npm install -g generator-react-wutao安装的就是本地的包

发布npm包到远程

npm login / npm adduser
npm publish
可以去你的npm看发布过的包

npm官网

注意事项

1、设置仓库地址为npm官方仓库地址(国内大部分都使用阿里淘宝镜像，如果没改publish会失败)
npm config set registry https://registry.npmjs.org/

2、执行命令npm publish发布，没有报任何异常，提示发布成功，但是登录npm官网始终找不到你刚发布的package，
执行命令npm i ngx-core或npm view ngx-core versions会报404的问题，这说明发布失败
解决方法：执行命令npm config get registry查看镜像地址，必须是https://registry.npmjs.org/（https），如果不是请修改
重新发布后以上问题解决

3、执行命令npm login或npm adduser时，一直报以下错误登录不上
npm ERR! 301 Could not create user
npm ERR! undefined
解决方法：升级npm node环境，升级到最新版本，引文当前版本可能有点旧了

使用
1. npm install -g generator-react-wutao
2. yo
3. choose ...