如何实现一个简单的Node.js脚手架

hizengzeng 发布于2019-08-21 17:53 / 398人阅读

摘要：目标开发一个简单的脚手架，能够提供给用户进行安装。在脚手架中使用脚本。具体用法如下具体展示效果如下对用户文件进行读写操作通过上面的步骤，我们已经能够完成一个简单的脚手架了。

原因

在工作中，需要开发一个脚手架，用于给相关用户提供相关的开发便利性。

适合人群

对前端、Node操作有一定的了解，同时向了解脚手架开发过程或者需要自己实现一个脚手架的开发者。

目标

开发一个简单的脚手架，能够提供给用户进行安装。

能够输出相关提示。

对用户文件进行读写操作。

在脚手架中使用Shell脚本。

更多与用户交互和文件操作等进阶内容可以查看同系列第二篇：如何实现一个脚手架进阶版（Vue-cli v2.9学习篇）

步骤 开发脚手架

脚手架的开发最开始过程与普通的前端项目相同，需要一个入口文件command.js和配置文件package.json。

与其他配置文件不同的是，你需要在command.js文件第一行增加如下声明：

#! /usr/bin/env node

同时需要在package.json文件中加上一下一项：

{
  ...,
  "bin": {
       "cm-cli": "command.js"
   }
}

在配置文件中增加了此项后，只需要在配置文件根目录下执行npm link命令，即可使用cm-cli --help命令来查看加载的cm-cli脚手架。

如果你发布了你的脚手架，那么在其他用户使用命令npm install -g cm-cli之后，便可以在全局下使用你的脚手架了。

对用户进行提示

在对注释和命令进行提示中，我们需要使用到commander包，使用npm install commander即可进行安装。（如果NPM版本低于5，则需要添加--save参数保证更新package.json配置文件）。

commander是一个提供用户命令行输入和参数解析的强大功能。有需要的可以阅读相关的库文档。在这里我介绍两个用的最多的方法。

option

能够初始化自定义的参数对象，设置关键字和描述，同时还可以设置读取用户输入的参数。具体用法如下：

const commander = require("commander");

commander.version("1.0.0")
    .option("-a, --aaa", "aaaaa")
    .option("-b, --bbb", "bbbbb")
    .option("-c, --ccc [name]", "ccccc")
    .parse(process.argv);


if (commander.aaa) {
    console.log("aaa");
}

if (commander.bbb) {
    console.log("bbb");
}

if (commander.ccc) {
    console.log("ccc", commander.ccc);
}

具体展示如下：

command

该方法能够在命令行增加一个命令。用户在执行此命令后，能够执行回调中的逻辑。具体用法如下：

commander
    .command("init ")
    .description("init extension project")
    .action((extensionId) => {
        console.log(`init Extension Project "${extensionId}"`);
        // todo something you need
    });

具体展示效果如下：

对用户文件进行读写操作

通过上面的步骤，我们已经能够完成一个简单的脚手架了。下面，我们需要读取用户配置，同时为用户生成一些模板文件。

读取文件

现在，我们需要读取用户的cm-cli.json配置文件来进行一些配置。

我们可以使用Node.js的fs文件模块来对文件进度读操作，由于此处没有太多难点，因此略去。

写入文件模板

我们提前将模板文件存储在CDN上，再根据本地读取到的相关脚手架配置文件来进行模板的下载。

注：脚手架中读取的路径为使用者使用时当前路径，因此没有办法将模板文件存储在脚手架中进行读取。

我们可以使用诸如request这种库来帮助我们进行文件下载，简化操作步骤。执行npm install request`即可进行安装。

注：在文件写入时建议先判断文件是否存在，再进行覆盖。

使用Shell脚本

与Node.js提供的API函数来看，有些人更加倾向于使用Shell脚本来进行文件操作。幸运的是，我们也可以在我们的脚手架中引入node-cmd来启用对Shell脚本的支持。执行npm install node-cmd即可进行安装。

具体示例如下：

commander
    .command("init ")
    .description("init extension project")
    .action((extensionId) => {
        id = extensionId;
        console.log(`init Extension Project "${extensionId}"`);

        cmd.get(
            `
            mkdir -p static/${extensionId}

            mkdir tmp
            mkdir tmp/source-file
            mkdir tmp/build-file
            curl -o tmp/source-file/index.js https://xxxxxxxx.com?filename=index.js
            touch tmp/source-file/index.css

            curl -o tmp/build-file/server.js https://xxxxxxxx.com?filename=server.js
            curl -o tmp/build-file/router.js https://xxxxxxxx.com?filename=router.js
            curl -o tmp/build-file/package.json https://xxxxxxxx.com?filename=package.json
            
            cp  tmp/source-file/* static/${extensionId}
            cp tmp/build-file/* ./
            rm -fr tmp
            npm install
            `,
            (err, data) => {
                console.log(data)
                if (!err) {
                    console.log("init success");
                    return;
                }

                console.error("init error");
            });
    });

我们可以快速的使用Shell脚本来进行文件夹的创建和文件模板的下载。

总结

脚手架想要在终端能够快速执行，可以在package.json配置文件中增加相关字段。

脚手架需要能够读取相关终端输入，可以使用commander库来快速开发。

脚手架需要能够执行Shell脚本，可以使用node-cmd库来快速实现需求。

服务器托管 idc机房托管 js实现的简单特效 node.js服务器如何部署到云上用c实现简单的shell java实现简单的web服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90165.html

如何实现一个脚手架进阶版（Vue-cli v2.9学习篇）

摘要：如果没有看过之前一篇博客的，或者对的脚手架没有了解过的同学，推荐先看上一篇如何实现一个简单的脚手架。它是一个用来构建静态网站的类库，也能够用来对文件进行处理。有任何问题欢迎进行交流。前言在之前一篇博客介绍了关于Node脚手架的一些基础的知识，这篇博客是在之前的基础上针对在Node中开发脚手架中遇到的问题，如：终端样式、交互问题文件处理问题通过对Vue-cli 2.9.2的...

thekingisalwaysluc 2019-08-26 11:34 评论0 收藏0
前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿

摘要：前端每周清单第期支付宝前端构建工具发展用加快网页响应速度饿了么升级实践前端前端每周清单前端每周清单专注前端领域内容，分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿了么PWA 升级实践为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔...

liuchengxu 2019-08-20 16:23 评论0 收藏0
后端知识点总结——NODE.JS（高级）

摘要：阶段是事件循环的第一阶段习惯上往往都会设置数将回调函数添加到事件循环的阶段的队列中等待执行。后端知识点总结——NODE.JS（高级） 1.Node入门: 什么是: 针对网络应用开发的平台主要特征: 基于Google的JavaScript运行时引擎V8 扩展了Node标准类库: TCP，同步或异步文件管理，HTTP 为什么使用Node: 可以在服务器端运行js: 现有前端团队可直...

bovenson 2019-08-22 16:38 评论0 收藏0
7月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 评论0 收藏0
开发一个 Parcel-vue 脚手架工具

摘要：在实际工作中，我们可以定制一个属于自己的脚手架，来提高自己的工作效率。思路要开发脚手架，首先要理清思路，脚手架是如何工作的我们可以借鉴的基本思路。本地测试以上是我写的一个的脚手架源码，点击即可查看，欢迎前言像我们熟悉的 vue-cli，create-react-app 等脚手架，只需要输入简单的命令 vue init webpack project，即可快速帮我们生成一个初始项目。...

xiaochao 2019-08-26 12:21 评论0 收藏0