您所在的位置:首页 / 知识分享

我奶奶看了都点赞的前端脚手架教程

2020.12.31

801

老余

一说起脚手架,你肯定会想到vue-cli。有些人看到vue-cli那个酷炫的功能和交互就会打退堂鼓。如果我告诉你,我们只需要具备nodejs基础就能写出vue-cli那样的功能来,你是不是稍微会兴奋点呢?接下来跟着我的步伐一点一点揭开脚手架的面纱吧。

准备工作

首先我们的电脑需要有nodejs开发环境,下载安装请点击这里(已有环境请省略):nodejs; cmd输入node -v,出现下图版本号即安装成功。

开发步骤

初始化项目

npm init初始化一个项目;初始化成功之后会根据输入的配置生成一个package.json文件:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
} 复制代码

添加脚手架命令和命令入口文件(test)

脚手架命令:在package.json中添加bin配置来指定自己定义的命令对应的可执行文件的位置,代码如下:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "bin": {
    "test": "bin/test.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
} 复制代码

命令入口文件:根据package.json中的bin配置,我们在项目根目录下新增bin文件夹,并且在该文件夹下新建·test.js,代码如下:

#!/usr/bin/env node
console.log('test') 复制代码

第一行是必须添加的,是指定这里用node解析这个脚本。默认找/usr/bin目录下,如果找不到去系统环境变量查找。

这时我们cmd输入test命令,你会发现报错了: 为什么找不到test命令呢?让我们先来理解下为啥我们安装了vue-cli之后,输入vue就不报错呢?带着疑问打开我们npm全局安装的文件目录: 请留意上图红色的地方,我们会发现我们熟悉的老朋友也在里头:cnpm,vue。这里我们先留下悬念,先回到刚才的脚手架项目。

link到全局:项目根目录下执行如下命令npm link,执行成功之后我们再查看我们全局npm的目录,这个时候我们会发现,多了几个项,细心地你肯定会发现,多出来的文件命名就是我们在package.json中配置的bin键: 



这个时候我们再次打开cmd输入test试下:

对比上面失败的效果,你会发现这次系统识别了test命令,而且控制台输出了test。到这里上面的疑问应该都解开了:执行npm link,将当前的代码在npm全局目录下留个快捷方式,npm检测到package.json里面存在一个bin字段,它就同时在全局npm包目录下生成了一个可执行文件:

  1. npm link,链接到全局
  2. bin配合npm link,生成命令文件
  3. "test": "bin/test.js",cmd执行test,根据配置会去执行bin/test.js这个文件

添加命令

别人脚手架有的功能,我们也得有,例如:-V(--version) -H(--help)等。

commander

首先我们先安装下需要的commander库,然后为我们的test命令添加最基础的版本号查看命令:

#!/usr/bin/env node
const program = require('commander')
program
	.version(`version is ${require('../package.json').version}`)
	.parse(process.argv) 复制代码
 

这里需要注意的是末尾的.parse(process.argv)的代码不能丢,如果没有则解析不了我们输入的参数,效果如下:

 

此外还可以添加.description .usage .option .action .command等;下面我们来重点说下.command和.action方法:其中,command允许我们注册一个命令(类似于vue create)


作者:罗哥哥
链接:https://juejin.cn/post/6911987404039520270
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关新闻

如何提高小程序用户量

2018.10.05

2109

小程序的用户从哪里来

微信运动彻底玩坏,可以抓出轨

2016.05.03

3503

不知不觉中,似乎朋友圈的好友都开始运动起来了,纷纷晒着微信运动排行榜,新用途来了!玩坏微信运动吧!

SEM少花钱的技巧

2015.11.12

3037