美文网首页
自定义yeoman generator

自定义yeoman generator

作者: 钱学敏 | 来源:发表于2018-04-25 23:50 被阅读0次

    https://segmentfault.com/a/1190000010665132
    https://www.jianshu.com/p/9f3e6bcdb274

    初始化

    安装nodejs
    npm install -g yo
    npm install -g generator-generator

    yo generator //初始化项目模版
    项目名称自己设置,必须是以generator-开头,协议选择MIT


    初始化项目

    配置

    配置

    generators/app/templates/
    是默认存放文件的目录,把所有模版文件放在这个目录下

    /generators/app/index.js
    是Yeoman的配置文件,定义如何生成我们的脚手架

    ///generators/app/index.js
    'use strict';
    const Generator = require('yeoman-generator');
    const chalk = require('chalk');
    const yosay = require('yosay');
    const path = require('path');
    const mkdirp = require('mkdirp');
    
    module.exports = class extends Generator {
    
      //初始化方法,用于获取项目状态、配置等
      initializing() {
        this.props = {};
      }
      // 信息采集 获取用户输入
      prompting() {
        this.log(
          yosay(`Welcome to the remarkable ${chalk.red('generator-qxm-mobile')} generator!`)
        );
    
        const prompts = [{
          type: 'input',
          name: 'projectName',
          message: '项目名称',
          default: 'my-project'
        }];
    
        return this.prompt(prompts).then(props => {
          // To access props later use this.props.someAnswer;
          this.props = props;
        });
      }
    
      defaults() {
    
        if (path.basename(this.destinationPath()) !== this.props.projectName) {
          this.log(
            'Your generator must be inside a folder named ' + this.props.projectName + '\n' +
            'I\'ll automatically create this folder.'
          );
          //  引用mkdirp模块创建文件夹 ,this.destinationRoot 设置要创建的工程的根目录。
          mkdirp(this.props.projectName);
          this.destinationRoot(this.destinationPath(this.props.projectName));
        }
    
      }
      //执行文件写操作,即项目文件写入文件系统中
      writing() {
        this.fs.copy(
          this.templatePath('src'),
          this.destinationPath('src')
        );
      }
    
      //安装依赖
      install() {
        // this.installDependencies();
      }
      // 最后执行,可清楚临时文件等
      end() {
        this.log(
          chalk.green('项目构建成功, 请 `npm install` 安装依赖, 然后执行 `gulp` 运行')
        );
      }
    };
    

    测试

    由于我们在本地开发,并不知道用起来怎么样,所以可以使用 npm link命令,相当于在全局安装了此脚手架,然后在新文件夹中执行yo,选择脚手架,便可以测试

    yo qxm-mobile
    
    测试

    发布

    generator-qxm-mobile/package.json中的name要在https://www.npmjs.com/没被创建过,才可以发布。

    发布需要一个npm的账号,如果没有使用npm adduser创建;

    如果已有账号,运行npm login登陆。

    在项目根目录下,运行npm publish就可以发布了。如果更新后重新发布,注意修改根目录下的package.json文件中的版本号。

    使用npm unpublish 包名命令可以撤销发布,只有在发包的24小时内才允许撤销发布的包。

    相关文章

      网友评论

          本文标题:自定义yeoman generator

          本文链接:https://www.haomeiwen.com/subject/basulftx.html