详解如何实现一个简单的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 相关文章推荐
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
Vue父子传递实例讲解
Feb 14 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 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使用curl发送json格式数据实例
2013/12/17 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
python画一个玫瑰和一个爱心
2020/08/18 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
通信工程毕业生自荐信
2013/11/01 职场文书
优秀员工自荐书范文
2013/12/08 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
邓小平理论心得体会
2014/09/09 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
求职简历自我评价范文
2015/03/10 职场文书
老人与海读书笔记
2015/06/26 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python