使用yoeman创建一个脚手架

最新推荐文章于 2022-05-04 21:55:05 发布

hzisw

最新推荐文章于 2022-05-04 21:55:05 发布

阅读量1.2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： JavaScript html css 文章标签： vue javascript generator

本文链接：https://blog.youkuaiyun.com/hzisw/article/details/107402021

JavaScript 同时被 3 个专栏收录

3 篇文章

订阅专栏

html

2 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文介绍如何使用yoeman创建一个自定义的脚手架，包括创建无node_modules的模板工程，安装yo和generator，配置脚手架，删除默认文件并替换为自己的模板，使用npm link命令链接依赖，解决可能出现的错误，以及成功运行和发布脚手架到npm的流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

yoeman创建一个脚手架

创建一个自己的模版工程，不要有node_modules文件夹
全局安装yo npm i -g yo
全局安装yoeman的脚手架工具npm i -g generator-generator
进入模版工程目录下运行yo generator按照提示一步一步的走下去

注意: 脚手架名字必须是generator-打头的
创建成功后会在目录下生成一个generator-vue文件夹

文件夹的目录结构是这样的
cd generators/app/templates删除文件夹里的所有文件，然后将我们自己的模版工程拷贝进去

vim ../index.js将下列内容拷贝进去

'use strict';
const Generator = require('yeoman-generator');
const chalk = require('chalk');
const yosay = require('yosay');

module.exports = class extends Generator {
  prompting() {
    // Have Yeoman greet the user.
    this.log(
      yosay(`Welcome to the sensational ${chalk.red('generator-vues')} generator!`)
    );

    const prompts = [
      {
        type: 'confirm',
        name: 'install',
        message: 'Would you like to enable this option?',
        default: true
      }
    ];

    return this.prompt(prompts).then(props => {
      // To access props later use this.props.someAnswer;
      this.props = props;
    });
  }

  writing() {
    this.fs.copy(
      this.templatePath('**'), // 复制template下的所有文件
      this.destinationPath('./')
    );
  }

  install() {
    this.installDependencies({
      bower: false
    });
  }
};

上面的代码用到了yoeman的生命周期钩子

在这里插入图片描述

到脚手架根目录使用npm link命令，将我们脚手架所需的npm依赖包链接到全局
使用脚手架,到我们的需要安装的目录直接运行yo vues就可以安装目录啦

在这里插入图片描述

yo 后面跟的安装名字就是generator-vues，其中generator可以省略掉

执行可能会报错

Error: spawn bower ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
    at onErrorNT (internal/child_process.js:415:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)

可能就是因为上面的index.js不是复制的,在hooks里禁用bower安装就可以啦

this.installDependencies({
  bower: false
})

成功安装的界面

在这里插入图片描述

在执行以下我们的运行命令在这里插入图片描述
项目成功的跑起来啦

下一期介绍一下如何将我们的脚手架发布到npm上