前端脚手架搭建

4 篇文章 0 订阅
2 篇文章 0 订阅

        在前段开发中很多时候我们需要自动化做一些事情,比如vue-cli,我们可以通过他来快速创建一个项目。不过每个公司团队的技术体系不同和需求不同,我们可不可以按照个性化需求来创建自己的脚手架呢,可以的。

一、创建脚手架项目并安装依赖

        1、初始化项目

                npm init my-test-cli

        2、安装依赖

                 commander命令注册库,通过他来注册命令。

                child_process是shell脚本执行库,通过他来执行sell脚本功能。

                npm i commander child_process

二、编码和注释说明

        项目根目录创建index.js

#!/usr/bin/env node
/* 
'#!' 是shepang符号,通常在unix系统第一行,用于指明脚本文件的解释程序。
  我们会指定为node,但是不同用户的脚本解释器安装目录也不一定相同。
  所以通过/usr/bin/env,来指定取环境变量中去寻找 脚本指定程序的路径。

  特别注意发布到npm服务器一定要带“#!/usr/bin/env node”。
*/

// commander命令注册库,通过他来注册命令。
const program = require('commander')
// shell脚本执行库,通过他来执行sell脚本功能。
var process = require('child_process')

/* 
1:调试方式
  使用:node + 入口文件名.js + 命令或参数。
  分析:在调试过程中 node + 文件名 的形式 === 全局安装脚手架之后 直接用调用bin 中的 属性名 的形式  
  注释:可以先用node方式调试,比较方便,调试好功能后,再发布。
2:发布到  
  1 npm login 登录后 使用 npm public 进行发布(注意发布的版本号不能重复)
3:安装使用
  1 npm install 包名(package.json 中的 "name": "tqmy-cli-test-1")  -g (全局安装)
  2 调用脚手架 后面跟 命令或参数
    tqmy-cli-test-1-cli -ver
    调用脚手架名:是bin中的属性名 。 命令 和参数 是 下面代码中 配置的
    "bin": {
      "tqmy-cli-test-1-cli": "index.js"
    },
    特别注意:安装后,调用的 不是包名 ,不是包名。
*/


/* 
version:配置版本号及查看命令
  version('版本号') 默认 -v  输出版本号
  node index.js -v  输出 1.0.0 。 
  如果希望 -V 或者 -ver 或者 --version  ,可以在后面第二个参数配置:
  参数二:字符串 其中可以配置两项,使用‘,’分割。 
  version参数遵循 option语法。
  program.version('1.0.0', '-ver, --version')

option:定义commander的选项options(就是 一个命令后面的 -x --xxx)
  示例:.option('-n, --name <items1> [items2]', 'name description', 'default value')
  参数解析:
  自定义标志<必须>:分为长短标识,中间用逗号、竖线或者空格分割;标志后面可跟必须参数或可选参数,前者用 <> 包含,后者用 [] 包含
  选项描述<省略不报错>:在使用 --help 命令时显示标志描述
  默认值<可省略>
  短标志可以作为单独的参数传递。像 -abc 等于 -a -b -c。多词组成的选项,像“--template-engine”会变成 program.templateEngine 等。

command:用于添加命令名成
  示例: .command('add <num> [otherDirs...]', 'install description', opts)
  参数解析:
  命令名称<必须>:命令后面可跟用 <> 或 [] 包含的参数;命令的最后一个参数可以是可变的,像实例中那样在数组后面加入 ... 标志;在命令后面传入的参数会被传入到 action 的回调函数以及 program.args 数组中
  命令描述<可省略>:如果存在,且没有显示调用action(fn),就会启动子命令程序,否则会报错
  配置选项<可省略>:可配置noHelp、isDefault等

alias description usage:定义命令的别名 描述 和用法
  .alias('r')
  .usage('[options] <file ...>')
  .description('run setup commands for all envs')
action:定义命令的回调函数
  用法示例:.action(fn)
  回调函数fn可配置形参接收option中配置的参数。

*/
program.version('1.0.0', '-ver,--version')
  .command('init <name> <objname>')
  .alias('i')
  .option('-r, --rrr', '-r的选项参数')
  .option('-s, --S', '-s的选项参数')
  .action((name, objname, cmd) => {
    // name 要下载的库名,目前只做接收参数,但是没用到。
    // objname 下载好在本地创建的项目名


    // console.log(name)
    // console.log(cmd)
    /* 
    node index.js init aaa -r -s    
    输出:
    aaa
    { rrr: true, S: true }
    */

    console.log(objname)
    return
    console.log('clone template ...')
    // 这里不使用传入的库名 进行动态的下载库了, 以后 可以配置 :'git clone git@gitee.com:PeterZeng/' + webpack_vue_t1 + '.git'
    // 这里接收 objname, 用作新的项目名,也就是把下载到本地的项目 改个名,也可以连内部的 package中的 name都改掉。
    process.exec('git clone git@gitee.com:PeterZeng/xxxxxx.git' , function(error, stdout, stderr){
      if (error !== null) {
        console.log('exec error: ' + error);
        return;
      }
      console.log(stdout);
      console.log('clone success');
    })
  })
program.parse(process.argv)

三、本地调试

        node [路径/]<文件名> <命令名> [参数] [选项参数]

node ./index.js init mycliname

四、发布

        1、配置package.json

                脚手架项目的package.js中必须要配置bin项。其中可以配置多项属性。属性名为安装以后使用的命令,属性值是该命令对应的 入口文件。

"bin": {
    "my-cli-test-cli": "./index.js"
 },

        2、npm账号登录,没有账号到npm官网去注册。注意如果改了源地址 使用 npm config set registry https://registry.npmjs.org/  改回来。

npm login , 然后输入用户名密码

npm login

        3、发布到npm服务器

npm publish

     五、下载安装并使用

        1、安装,脚手架需要全局安装,安装的名字是包名。

npm i my-test-cli -g

        2、使用, 全局安装成功后,通过之前bin中配置的属性名来执行

  <命令名> [参数] [选项参数]

my-cli-test-cli init mycliname

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值