创建自己的脚手架工具

最新推荐文章于 2024-04-06 09:56:23 发布

月生三州

最新推荐文章于 2024-04-06 09:56:23 发布

阅读量398

点赞数

分类专栏：笔记训练营文章标签： javascript

本文链接：https://blog.csdn.net/csz_12345/article/details/111502872

版权

笔记同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

训练营

5 篇文章 0 订阅

订阅专栏

常用的脚手架工具

特定内容的：react-cli ,vue-cli
通用型（灵活可扩展创建项目时用）： Yeoman
可创建特定类型组建的：Plop
重点来说一下Yeoman这款工具

Yeoman

用于创建脚手架开发的工具，居于node.js开发的

基本使用

先全局安装Yeoman 的i/o工具yo

//使用yarn安装
yarn global add yo 
//使用npm安装
//npm install yo --global

还需安装对应的generator

//使用yarn安装
yarn global add generator-node 
//使用npm安装
//npm install generator-node --global

通过yo运行generator

cd path/pare //进入一个位置
mkdir my-module //利用mkdir命令创建文件夹
yo node

命令执行之后会出现命令交互式，填写的内容会更改相应的目录
在这里插入图片描述
这样他就创建好了一个基础的文件目录结构

当然在再有些项目中，需要定制自己的项目建构，那就需要自定义去定制
自定义Generator
基于Yeoman搭建自己的脚手架，把常用的放到自己的脚手架中

创建Generator模块

Generator本质上就是一个NPM模块，有特定的结构

generators-<name>/  ------生成器目录
  app/       ------默认生成器目录
    index.js ------默认生成器实现
  component/ ------其他生成器目录
    index.js ------其他生成器实现
package.json ------模块包配置文件

yeoman的Generator的模块名称必须是generator-的格式，不然找不到模块
app/index.js文件是他的核心入口文件

//此文件作为Generator 的核心入口
//需要导出一个继承自 Yeoman Generator的类型
//Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
//我们在这些方法中可以通过调用父类提供的一些功能，例如文件写入

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
    prompting () {
        // Yeoman 在询问用户环节会自动调用此方法
        // 在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问
        return this.prompt([
          {
            type: 'input',
            name: 'name',
            message: 'Your project name',
            default: this.appname // appname 为项目生成目录名称
          }
         
        ])
        .then(answers => {
            // answers => { name: 'user input value' }
            this.answers = answers
          })
      }
    writing (){
        //Yoman 自动在生成文件阶段调用此方法
        //尝试写入文件
        // this.fs.write(
        //     this.destinationPath('temp.txt'),
        //     Math.random().toString()
        // )

        //通过模板方式写入文件到目标目录
        //模板文件路径
        // const tmpl = this.templatePath('foo.txt')
        // //输出目录路经
        // const output = this.destinationPath('foo.txt')
        // //模板数据上下文
        // const context = {title: 'Hello csz-',success:true}
      
        // this.fs.copyTpl(tmpl,output,context)

           //模板文件路径
           const tmpl = this.templatePath('bar.html')
           //输出目录路经
           const output = this.destinationPath('bar.html')
           //模板数据上下文
           
           const context = this.answers
           
           this.fs.copyTpl(tmpl,output,context)
    }
}

这是我的目录建构
在这里插入图片描述
bar.html 文件的内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%= name %></title>
</head>
<body>
  <h1><%= name %></h1>
</body>
</html>

想尝试使用该脚手架把当前的文件链接到全局

yarn link  //把文件链接到全局

在你想用的文件夹中输入

yo <name>  //如yo sample这里的名字是你定义的生成器名/generators-<name>/  ------生成器目录我这是sample，是yo <name>

填写命令行交互，就会创建相应的目录建构
当然有时候我们不可能就一个文件，在构建，有好多个文件需要使用模板轮播去写入比如vue的基础文件目录
在这里插入图片描述
那需要在app/index.js中

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
    prompting () {
        // Yeoman 在询问用户环节会自动调用此方法
        // 在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问
        return this.prompt([
          {
            type: 'input',
            name: 'name',
            message: 'Your project name',
            default: this.appname // appname 为项目生成目录名称
          }
         
        ])
        .then(answers => {
            // answers => { name: 'user input value' }
            this.answers = answers
          })
      }
    writing (){
    // 把每一个文件都通过模板转换到目标路径

    const templates = [
        '.browserslistrc',
        '.editorconfig',
        '.env.development',
        '.env.production',
        '.eslintrc.js',
        '.gitignore',
        'babel.config.js',
        'package.json',
        'postcss.config.js',
        'README.md',
        'public/favicon.ico',
        'public/index.html',
        'src/App.vue',
        'src/main.js',
        'src/router.js',
        'src/assets/logo.png',
        'src/components/HelloWorld.vue',
        'src/store/actions.js',
        'src/store/getters.js',
        'src/store/index.js',
        'src/store/mutations.js',
        'src/store/state.js',
        'src/utils/request.js',
        'src/views/About.vue',
        'src/views/Home.vue'
      ]
  
      templates.forEach(item => {
        // item => 每个文件路径
        this.fs.copyTpl(
          this.templatePath(item),
          this.destinationPath(item),
          this.answers
        )
      })
          
    }
}

将每个文件导入
如果你想大家都是用这个，那你需要发布到他的官方中

Plop

plop是一个小而美的脚手架工具，简单的说说，用在的场景比如：有些目录有多个不同类型的文件，有基本的格式如react中有.css .js .test.js 这些文件，那我们在创建这些文件的时候需要一个一个文件的创建，这个时候我们可以使用plop,用命令行工具去生成所有，并带上基础的模板。

简单使用

首先要将plop安装到全局环境

npm i plop -g

再将plop安装到当前项目中

npm i plop -D

在跟目录中创建一个plopfile.js 文件这是plop的入口文件
如：

module.exports = plop => {
  plop.setGenerator('component', {// 这里的component是一个自己设定的名字，在执行命令行的时候会用到
    description: 'application component',// 这里是对这个plop的功能描述
    prompts: [
      {
        type: 'input',// 问题的类型
        name: 'name',// 问题对应得到答案的变量名，可以在actions中使用该变量
        message: 'component name',// 在命令行中的问题
        default:'cootto' // 问题的默认答案
      }
    ],
    actions: [
      {
        type: 'add', // 操作类型，这里是添加文件
        path: 'src/components/{{name}}/{{name}}.js',//导出的文件路径
        templateFile: 'plop-templates/component.js.hbs'//模板文件路径
      },
      {
        type: 'add',
        path: 'src/components/{{name}}/{{name}}.css',
        templateFile: 'plop-templates/component.css.hbs'
      },
      {
        type: 'add',
        path: 'src/components/{{name}}/{{name}}.test.js',
        templateFile: 'plop-templates/component.test.js.hbs'
      }
    ]
  })
}

这是我的项目建构
在这里插入图片描述
使用的话就用

plop component

回答命令行问答，就会按照你填写的文件名生成三个不同的文件
如我生成的Hwader组件
在这里插入图片描述
好了，就写到这个，我还在学习中，写的能力不强，不过我会去完善自己的写作能力的。谢谢观看。

月生三州

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建自己的脚手架工具

常用的脚手架工具特定内容的：react-cli ,vue-cli通用型（灵活可扩展创建项目时用）： Yeoman可创建特定类型组建的：Plop重点来说一下YeomanYeoman用于创建脚手架开发的工具，居于node.js开发的基本使用先全局安装Yeoman 的i/o工具yo//使用yarn安装yarn global add yo //使用npm安装//npm install yo --global还需安装对应的generator//使用yarn安装yarn glo
复制链接

扫一扫

专栏目录