利用Yeoman编写自己的脚手架生成器

最新推荐文章于 2023-05-31 14:48:56 发布

MrzhangxianshengJS

最新推荐文章于 2023-05-31 14:48:56 发布

阅读量1.1k

点赞数 1

分类专栏： yeoman 文章标签： vue webpack4.0 yeoman cli

本文链接：https://blog.csdn.net/MrzhangxianshengJS/article/details/84336667

版权

yeoman 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

首先我们应该创建一个文件夹,请尽量避免在C盘创建,如果在C盘可能会导致安装npm包的权限问题导致失败,我们的文件夹命名一定要按照官方文档给的格式来例如: generator-name(name是自己命名的生成器名称);
所有所有的前提就是你要安装node,版本不能太低,建议安装最新版本的node;官网地址: https://nodejs.org/en/download/;请按照自己操作系统的32位或者64位来安装.这里node的安装就不给介绍了;
yo是Yeoman命令行实用程序，允许使用脚手架模板（称为生成器）创建项目。Yo和使用的生成器使用npm安装。

npm install -g yo //这一步是必须安装的包

需要创建个在generator-name/ 下创建一个文件package.json文件

{
  "name": "generator-hellocli",//必须以generator-开头
  "version": "1.0.0",
  "description": "脚手架",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "files": [
    "generators"//生成器的文件夹
  ],
  "keywords": [
    "yeoman-generator"//关键字一定要是这个不然yo不会识别
  ],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "yeoman-generator": "^3.1.1"
  }
}

运行命令

npm install --save yeoman-generators //安装依赖

我们建一个标准目录
接着我们去编写生成器

var Generator = require('yeoman-generator');//这里我们需要引入我们刚刚安装的yeoman-generator生成器
const version = require('../../package.json').version;//我们需要引入这个文件,下面我们会用到
module.exports= class extends Generator{//老规矩接口暴露
    constructor(args, opts){//这个里面我们来定义一些属性和一些执行的方法
        super(args, opts);
        this.options.framework = 'vue';//属性框架我们是vue 名字可以自定义哈 不用拘束
        this.options.js = 'babel';//JS我们用babel来编译更超前的语法,来兼容浏览器
        this.options.modules = 'webpack';//模块我们用webpack
    //接下来我们是一些选配置的地方我们可以前提设定好一些配置属性我们在其他方法中来用
      this.config.save();//此方法将配置写入.yo-rc.json文件。如果该文件尚不存在，则该save方法将创建该文件   
    }
    async prompting(){//异步方法 我们需要在这里做一些和人交互的处理,
        this.option('title', {//这里的title配置的是package.json的项目名称和html模板里面的title标签的内容
        type: Boolean,
        required: false
        });
        this.option('version', {//版本号
        type: Boolean,
        required: false
        });
        this.option('description', {//描述
        type: Boolean,
        required: false
        });
        this.option('main', {//入口文件
        type: Boolean,
        required: false
        });
        this.option('author', {//作者
        type: Boolean,
        required: false
        });
        this.answers = await this.prompt([{
            type: 'input',//在页面互动 输入
            name: 'title',
            message: '请输入你项目的名称',
          },
          {
            type: 'input',//在页面互动 输入
            name: 'version',
            message: '请输入你项目的版本',
            default: '1.0.0'
          },
          {
            type: 'input',//在页面互动 输入
            name: 'description',
            message: '请输入你项目的描述',
          },
          {
            type: 'input',//在页面互动 输入
            name: 'main',
            message: '输入项目的入口文件',
            default: 'index.js'
          },
          {
            type: 'input',//在页面互动 输入
            name: 'author',
            message: '输入项目的作者',
          },
          //这些是选配的 大家可以根据自己的实际开发情况来选配一些模块
          {
            type: 'list',//列表选项
            name: 'router',
            message: '是否需要vueRouter',
            choices: [{
                name: 'Vue Router 2',
                value: 'router'
              },
              {
                name: 'None',
                value: false
              }
            ]
          },
          {
            type: 'list',//列表选项
            name: 'vuex',
            message: '是否需要Vue状态管理库vueX',
            choices: [{
                name: 'Vuex',
                value: 'vuex'
              },
              {
                name: 'None',
                value: false
              }
            ]
          },
        ]);
    }
    configuring(){//保存配置并配置项目（创建.editorconfig文件和其他元数据文件）
      const file=[//我们把我们需要复制的文件提前定义在这个数组里
        '.babelrc',
        '.editorconfig', 
        '.gitignore', 
        'postcss.config.js',
        'build/',//复制build文件夹下所有的文件
        'src/',//复制src文件夹下所有的文件
        'static/styles/.gitkeep'//复制静态文件夹static下的所有文件
      ];
      file.forEach((file)=>{
        this.fs.copy(this.templatePath(file),this.destinationPath(file));
        //this.templatePath()这个方法指向的地址是模板文件夹templates这个文件夹
        //this.destinationPath()这个方法指向的地址是根目录
      });
      this.props = {};
      Object.assign(this.props,this.options,this.answers);//合并对象在下个队列中使用;
      delete this.props.env;//删除用不到的属性
      delete this.props.h;
      delete this.props.help;
      this.config.set('version', version);//设置存储.yo-rc.json
      this.config.set('props', this.props);
    }
    writing(){
      const pkgJson = {//用变量把我们需要写入package.json文件中的内容存起来;
        "name": this.props.title,
        "version": this.props.version,
        "description": this.props.description,
        "main": this.props.main,
        "scripts": {
          build: 'webpack --mode=production --config ./build/webpack.prod.config.js',
          dev: 'webpack-dev-server --mode=development --config ./build/webpack.dev.config.js --open',
          proxy:"webpack-dev-server --mode=development --config ./build/webpack.proxy.config.js --open --host 192.168.100.49 --port 8082"
        },
        "author": this.props.author,
        "license": "ISC"
      }
      this.fs.extendJSON(this.destinationPath('package.json'), pkgJson);//利用这个方法创建这个文件并且把内容写进去
      this.fs.copyTpl(//下面就是我们的html文件了 我们的模板粘贴复制然后把内容写入进去
        this.templatePath('index.html'),
        this.destinationPath('index.html'), {
          title: this.props.title
        }
      );
      //接下来就是我们需要安装的依赖了
      var devDependencies=[
        "@babel/core@^7.1.6",
        "@babel/preset-env@^7.1.6",
        "babel-core",
        "babel-loader@^7.1.5",
        "babel-preset-env@^1.7.0",
        "babel-preset-es2015@^6.24.1",
        "babel-preset-stage-3@^6.24.1",
        "copy-webpack-plugin",
        "css-loader",
        "cssnano",
        "file-loader",
        "happypack",
        "html-webpack-plugin",
        "less",
        "less-loader",
        "mini-css-extract-plugin",
        "optimize-css-assets-webpack-plugin",
        "os",
        "postcss-import",
        "postcss-loader",
        "postcss-preset-env",
        "postcss-safe-parser",
        "style-loader",
        "url-loader",
        "vue-loader",
        "vue-style-loader",
        "vue-template-compiler",
        "webpack",
        "webpack-bundle-analyzer",
        "webpack-dev-server",
        "webpack-merge",
        "babel-plugin-syntax-dynamic-import",
        "webpack-cli"
      ];
      var dependencies=[
        'vue',
        'iview',
        'vue-router',
        'vuex',
        'qs',
        'axios'
      ];
      this.npmInstall(devDependencies,{
        'save-dev': true
      });//安装依赖
      this.npmInstall(dependencies)
    }
    install(){//在这个地方同意安装运行
      this.npmInstall();
    }

}

关于webpack的4.0+版本的相关具体配置可以去看我写的配置文档,这里就不介绍了,可以去看我的博客
地址: https://blog.csdn.net/MrzhangxianshengJS/article/details/82111532
5. 关联本地 npm link
在这里插入图片描述
6. 看到这个界面就表示成功了,我们运行命令 yo

我们选择Hellocli这个点击回车
然后输入交互就可以了,工具会帮我们自动安装好
然后等安装好所有需要的模块,我们就会看到这个界面
这时候我们运行 npm run dev 项目就可以重新启动起来了
页面也正常
最后分享一些API

//   initializing(){//初始化方法（检查当前项目状态，获取配置等）优先级第一

//   }
//   priorityName() {//提示用户选择的地方（你打电话的地方this.prompt()）优先级第二

   }
  configuring(){//保存配置并配置项目（创建.editorconfig文件和其他元数据文件）

   }
   default(){//如果方法名称与优先级不匹配，则会将其推送到该组

  }
   writing(){//编写生成器特定文件（路由，控制器等）的位置

   }
   conflicts(){//处理冲突的地方（内部使用）

   }
  install(){// 安装运行的地方（npm

   }
  end(){//最后称呼，清理，说再见等

   }

MrzhangxianshengJS

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用Yeoman编写自己的脚手架生成器

首先我们应该创建一个文件夹,请尽量避免在C盘创建,如果在C盘可能会导致安装npm包的权限问题导致失败,我们的文件夹命名一定要按照官方文档给的格式来例如: generator-name(name是自己命名的生成器名称);所有所有的前提就是你要安装node,版本不能太低,建议安装最新版本的node;官网地址: https://nodejs.org/en/download/;请按照自己操作系统的32位...
复制链接

扫一扫