欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

小型前端脚手架工具Plop

程序员文章站 2022-06-28 17:42:16
小型的脚手架工具，是一款主要用于去创建项目中特定类型文件的小工具，类似于Yeoman中的sub generator, 不过它一般不会独立去使用，一般我们会把Plop集成到项目当中。接下来我们来通过两个案例的对比，去体会一下Plop的真正作用及他的优势。日常开发中经常会遇到这样的问题，我们在开发当中，经常需要重复去创建相同类型的文件，例如每一个组件都会有三个文件去组成。分别是js，css，test.js, 如果我们需要创建一个组件，就要去创建三个文件，并且每一个文件中都要有一些基础代码，这就比较繁琐，而且...

小型的脚手架工具，是一款主要用于去创建项目中特定类型文件的小工具，类似于Yeoman中的sub generator, 不过它一般不会独立去使用，一般我们会把Plop集成到项目当中。

接下来我们来通过两个案例的对比，去体会一下Plop的真正作用及他的优势。

日常开发中经常会遇到这样的问题，我们在开发当中，经常需要重复去创建相同类型的文件，例如每一个组件都会有三个文件去组成。分别是js，css，test.js, 如果我们需要创建一个组件，就要去创建三个文件，并且每一个文件中都要有一些基础代码，这就比较繁琐，而且我们很难统一每一个组件文件中那些基础的代码。Plop可以结局这个问题，我们只需要在命令行中取运行Plop

yarn plop component

会询问我们一些信息，并且自动的帮我们创建一些文件，这也就保证了我们每次创建的文件都是统一的，并且是自动的。

Plop的基本使用

接下来我们一起在一个项目汇总加入Plop的集成，去了解一下Plop他该如何使用，使用Plop的第一件事就是将Plop作为一个npm的模块安装到我们的开发依赖当中。

yarn add plop --dev

安装过后我们在项目的跟目录下新建一个plopfile.js文件，这个文件是plop工作的一个入口文件，需要导出一个函数，而且这个函数可以接收一个叫plop的对象，并且这个对象提供了一系列工具函数，用于去帮我们创建生成器的任务。

module.exports = plop => {
    plop.setGenerator('component', {});
}

plop有个成员叫setGenerator, 接收两个参数，第一个参数是生成器的名字，第二个参数是生成器的一些选项。

在配置选项中我们需要指定一下生成器的参数

{
    description: '生成器的描述',
    prompts: [ // 发出的命令行问题
        {
            type: 'input',
            name: 'name',
            message: 'component name',
            default: 'MyComponent'
        }
    ],
    actions: [ // 问题完成后的动作
        {
            type: 'add', // 添加一个全新的文件
            path: 'src/components/{{name}}/{{name}}.js', // 指定添加的文件会被添加到哪个具体的路径, 可以通过双花括号的方式使用命令行传入的变量
            templateFile: 'plop-templates/component.hbs', // 本次添加文件的母版文件是什么, 一般我们会把母版文件放在plop-template目录中，可以通过handlebars去创建模板文件.hbs
        }

    ]
}

数据填写完毕我们这个Plop就算是完成了。

在安装Plop模块的时候plop提供了一个CLI程序，可以通过yarn启动这个程序。
yarn plop ; // 生成器的名字

yarn plop component

yarn 会自动找到node_modules下bin目录下的命令行工具，回车过后就会执行我们上面定义的plop

我们可以尝试为生成器添加多个模板，就是添加多个actions, 官网中提供了多个type, 可以参考官网。

这就是Plop的一个基本使用，在这个过程中我们可以发现，Plop用来去创建项目当中同类型的文件还是非常方便的。

总结一下我们在一个项目当中具体去使用Plop需要这样几个步骤，首先我们需要将plop模块作为项目开发依赖去安装，然后我们需要在项目目录下创建一个plopfile.js文件，在有了plopfile文件过后我们需要在plopfile.js文件中定义一些脚手架任务，最后我们去编写一些用于生成特定类型文件的模板，这一切都完成过后我们需要通过plop提供的cli运行刚刚制定的脚手架任务，从而去生成我们在项目当中一些特定类型的文件。

脚手架的工作原理

通过询问你一些预设的问题，然后将你回答的结果结合一些模板文件，给你生成一个项目结构。

那接下来我们以一个小型的脚手架工具为例，通过NodeJS完成一个Node工具，再来去深入体会一下Node工具的工作过程。

那我们知道脚手架工具实际上就是一个node-cli应用，那创建脚手架就是创建一个node-cli应用，那这里我们具体来操作一下，我们首先进入到命令行，通过mkdir去创建一个工具目录

mkdir samlpe-cli
cd sample-cli

在这个目录下面我们通过yarn init 方式去初始化一个package.json文件

yarn init

有了这个文件之后通过编辑器打开这个目录，紧接着我们需要在package.json中添加一个bin字段，用于去指定一下我们cli应用的入口文件, 我们这里叫cli.js

{
  "name": "sample-cli",
  "bin": "cli.js",
  ...
}

再然后我们添加这个cli.js文件，跟以往我们在Node中书写的文件有所不同，cli的入口文件必须要有一个特定的文件头, 也就是在这个文件顶部写上这样一句话 #! /usr/bin/env node我们在这个文件中console.log一句话。

#! /usr/bin/env node

console.log('cli working')

如果说你的操作系统是linux或者mac系统你还还需要去修改这个文件的读写权限，把他修改成755，这样才可以作为一个cli的入口文件。

我们回到命令行，我们通过yarn link 将这个模块映射到全局

yarn link

这时候我们就可以在命令行使用sample这样一个命令, 通过执行这个命令我们的console.log成功打印出来，表示代码执行了。也就意味着我们这个cli基础就已经ok了。

sample-cli

接下来我们实现一下脚手架的具体业务，也就是我们脚手架的工作过程。

首先我们需要通过命令行交互的的方式去询问用户的一些信息，然后紧接着呢根据用户反馈回来的结果我们去生成文件，

  1. 通过命令行交互的方式询问用户信息

  2. 根据用户反馈回来的结果生成文件

在Node当中去发起命令行交互询问我们使用inquirer这样一个模块，那我们需要通过npm安装一下这个模块，我这里使用yarn，安装在依赖文件当中。

yarn add inquirer --dev

那有了这个模块过后就可以在代码中去载入, inquirer这个模块提供一个叫做prompt的方法用于发起一个命令行的询问。

他可以接收一个数组参数，数组中每一个成员就是一个问题，可以通过type指定问题输入方式，然后name指定返回值的键，message去指定屏幕上给用户的一个提示，在promise的then里面拿到这个问题接收到用户的答案。

我们这里不着急往下写，我们先通过console.log去打印一下。

const inquirer = require('inquirer');

inquirer.prompt([
    {
        type: 'input',
        name: 'name',
        message: 'Project name'
    }
]).then(answer => {
    console.log(answer);
})

回到控制台，我们命令行执行sample-cli, 此时就会提示我们需要输入项目的名称。

sample-cli

这样就可以看到问题和返回的结果。这也就证明inquirer确实可以帮我们发起命令行交互询问。

那有了inquirer之后接下来我们要考虑的就是动态的去生成我们的项目文件。

我们一般会根据模板去生成，所以我们在项目的跟目录下新建一个templates目录，在这个目录下我们去新建一些模板。

由于我们这里是讨论脚手架的工作过程，所以我们也不去关心模板里面有什么，我们就随便写点什么。我们可以通过 <%%>去替换询问过程中得到的答案。

index.html

<head>
    <title><%= name %></title>
</head>

我们还可以添加一些其他的模板文件，比如style.css

style.css

body {
    margin: 0;
    background-color: red;
}

回到cli.js文件, 这时候我们可以在得到问题答案的位置，根据用户回答的问题去生成文件。不过在生成前我们一般会先将模板路径和目标目录确定下来。

模板的目录应该是项目当前目录的templates，我们可以通过path获取。

const path = require('path');

// 工具当前目录
const tmplDir = path.join(__dirname, 'templates');

输出的目标目录一般是我们命令行在哪个目录去执行就应该是哪个路径，也就是cwd目录

const path = require('path');

// 工具当前目录
const tmplDir = path.join(__dirname, 'templates');
// 命令行所在目录
const destDir = process.cwd();

明确这两个目录，我们就可以通过fs模块去读取一下模板目录下一共有哪些文件。把这些文件全部输入到我们的目标目录，我们通过fs的readDir方法，这个方法会自动扫描目录下的所有文件

fs.readdir(tmplDir, (err, files) => {
    if (err) {
        throw err;
    }
    files.forEach(file => {
        console.log(file); // 得到每个文件的相对路径
    })
})

我们可以通过模板引擎去渲染路径对应的文件，先去安装一款模板引擎，这里我们使用ejs

yarn add ejs --dev

安装过后，回到代码中引入这个模板引擎, 通过模板引擎提供的renderFile去渲染这个路径对应的文件。

第一个参数是文件的绝对路径，第二个参数是模板引擎在工作的时候的数据上下文，第三个参数是回调函数，也就是我们在渲染成功过后的回调函数，当然如果你在渲染过程中出现了意外那你可以通过throw err的方式把这个错误抛出去。

我们可以先把result通过打印的方式打印出来看一下。

const fs = require('fs');
const path = require('path');
const inquirer = require('inquirer');
const ejs = require('ejs');

// 工具当前目录
const tmplDir = path.join(__dirname, 'templates');
// 命令行所在目录
const destDir = process.cwd();

inquirer.prompt([
    {
        type: 'input',
        name: 'name',
        message: 'Project name'
    }
]).then(answer => {
    fs.readdir(tmplDir, (err, files) => {
        if (err) {
            throw err;
        }
        files.forEach(file => {
            ejs.renderFile(path.join(tmplDir, file), answer, (err, result) => {
                if (err) {
                    throw err;
                }
                console.log(result);
            })
        })
    })
})

编辑完成之后我们运行一下脚手架工具。

sample-cli

此时打印出来的这个结果其实是已经经过模板引擎工作过后的结果，我们只需要将这个结果通过文件写入的方式写入到目标目录就可以了，那目标目录应该是通过path.join把我们destDir以及我们的file做一个拼接。内容就是我们这里的result。

files.forEach(file => {
    ejs.renderFile(path.join(tmplDir, file), answer, (err, result) => {
        if (err) {
            throw err;
        }
        fs.writeFileSync(path.join(destDir, file), result);
    })
})

完成过后我们找到一个新的目录，使用一下这个脚手架

sample-cli

我们输入项目名称过后，就会发现他会自动把我们模板里面的文件自动生成到对应的目录里面，至此我们就已经完成了一个非常简单，非常小型的一个脚手架应用。

那我们也回顾了一下脚手架的工作过程，其实脚手架的工作原理并不复杂，但是他的意义却是很大的，因为他确实在创建项目环节大大提高了我们的效率。

我们可以将自己的工具发布至npm上，提供给更多的人使用。

至于发布npm也非常的简单，首先我们需要注册npm账号，有两种方式可以注册，一种是登录npm官网https://www.npmjs.com/, 另一种是使用命令npm adduser。

npm adduser

会提示你输入用户名，密码，以及邮箱。

注册好后登录npm账号。

npm login

依次输入第二步中第一种方法注册的用户名、密码和邮箱。

登录成功后执行npm发布命令。

npm publish

注意：如果报错：‘You do not have permission to publish “samlpe-cli”. Are you logged in as the correct user?’

表示包samlpe-cli名字已经在包管理器已经存在被别人用了，需要更该包名称，我们可以前往package.json中的name中换一个名字。

{
  "name": "sample-cli1",
  "version": "1.0.0",
  "bin": "cli.js",
  ...
}

再次执行publish命令。出现 +sample-cli1@1.0.0即表示发布成功。

如果发布时报错：no_perms Private mode enable, only admin can publish this module:

表示当前不是原始镜像，要切换回原始的npm镜像

npm config set registry https://registry.npmjs.org/

至此你的node工具就可以提供给其他人使用了。

如果需要更新你的工具，只要继续执行npm publish就可以更新发布了，不过需要注意，每次发布都需要修改版本号version的值，同一个版本不允许发布两次。

{
  "name": "sample-cli1",
  "version": "1.0.1",
  "bin": "cli.js",
  ...
}

如果想要撤销本次发布可以执行

npm unpublish

不过需要注意，只有在发包的24小时内才允许撤销发布的包，超过24小时，就无法撤回了。

本文地址：https://blog.csdn.net/xuzhijia1991/article/details/111959507

相关标签： nodejs javascript html5

上一篇： Spring-framework5.0.2 源码阅读笔记 - AOP切面(代码织入阶段)

下一篇： 饮料可以煮开做果冻吗

推荐阅读