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


Posted in Javascript onDecember 04, 2017

原因

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

适合人群

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

目标

  1. 开发一个简单的脚手架,能够提供给用户进行安装。
  2. 能够输出相关提示。
  3. 对用户文件进行读写操作。
  4. 在脚手架中使用Shell脚本。

步骤

开发脚手架

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

与其他配置文件不同的是,需要在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);
}

具体展示如下:

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

command

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

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

具体展示效果如下:

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

对用户文件进行读写操作

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

读取文件

现在,我们需要读取用户的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 <extensionId>')
  .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库来快速实现需求。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Script的加载方法小结
Jan 12 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
浅谈React和Redux的连接react-redux
Dec 04 #Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 #Javascript
深入浅出webpack之externals的使用
Dec 04 #Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 #Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 #Javascript
基于JSONP原理解析(推荐)
Dec 04 #Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 #Javascript
You might like
php 分页原理详解
2009/08/21 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
python实现画一颗树和一片森林
2018/06/25 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
python操作excel让工作自动化
2019/08/09 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
win10搭建配置ftp服务器的方法
2022/08/05 Servers