npm 全局安装vuecli报错_前端脚手架CLI生成模版命令工具(包括,npm包的发布,脚手架的搭建,注意事项,优化等)...
NodeJs的出现,让前端工程化的理念不断深入,正在向正规军靠近。先是带来了Gulp、Webpack等强大的构建工具,随后又出现了vue-cli和create-react-app等完善的脚手架,提供了完整的项目架构,让我们可以更多的关注业务,而不必在项目基础设施上花费大量时间。
平时我们都只专注在业务上的开发,拿起一套开箱即用的模板项目就直接干。但是,这些现成的脚手架未必就能满足我们的业务需求,也未必是最佳实践,这时我们就可以自己开发一个脚手架,那么我们使用的脚手架里面到底做了什么,如何自己搭建脚手架呢?
脚手架代码github地址:https://github.com/hourong88/portal-cli
点击文章末尾,【阅读原文】即可访问
以下为正文,文章结构:
提问
1.脚手架需要实现什么?
初始化项目模版能力。
2.脚手架需要什么功能?
- 问询功能
- 下载模版(模版与脚手架分离,互不影响)
- 写入模版
- 优化(git初始化,安装依赖等)
3.用什么工具实现?
- commander.js 命令行工具
- chalk 命令行输出样式美化
- Inquirer.js 命令行交互
当然还有,download-git-repo git仓库代码下载,ora 命令行加载中效果等优化依赖工具,都可以在此基础上,进行丰富。
以下分为两步完成:
- 本地创建cli脚手架并测试 ;
- 发布脚手架
我们正常的流程是创建本地脚手架,绑定git仓库,发布包,从易到难,我们反过来,本文先讲怎么发一个最简单的npm包,然后把脚手架搭好了,走一遍发包流程,就OK了。
一、发布npm包
本地创建项目
首先,我们需要创建一个项目,这里就叫portal-cli, 项目结构如下:
- commands // 此文件夹用于放置自定义命令- utils- index.js // 项目入口- readme.md
为了测试,我们先在index.js放点内容:
#!/usr/bin/env node// 必须在文件头添加如上内容指定运行环境为nodeconsole.log('hello cli');
对于一般的nodejs项目,我们直接使用node index.js就可以了,但是这里是脚手架,肯定不能这样。我们需要把项目发布到npm,用户进行全局安装,然后就可以直接使用我们自定义的命令,类似portal-cli这样。
所以,我们需要将我们的项目做下改动,首先在package.json中添加如下内容:
"bin": { "portal-cli": "index.js" },
这样就可以将portal-cli定义为一个命令了,但此时仅仅只能在项目中使用,还不能作为全局命令使用,这里我们需要使用npm link将其链接到全局命令,执行成功后在你的全局node_modules目录下可以找到相应文件。然后输入命令测试一下,如果出现如下内容说明第一步已经成功一大半了:
anna@annadeMacBook-Air job % > portal-cli hello cli
*如果全局有bin相同名字的,会报错,需要把package.json里面bin起的名字修改一下
发布npm包注意事项:
- npm官网注册一个npm账户,已有账户的可以跳过这一步
- 使用
npm login
登录,需要输入username
、password
、email
npm whoami
检查自己是否成功登陆npm link
本地调试,上面已经调试的,跳过这一步- 使用
npm publish
发布 - 每次发布npm包,都要修改版本号
//npm publish报错npm notice integrity: sha512-Jkfy0M/VyAkQb[...]B9Ifdw2hF2CGQ==npm notice total files: 7 npm notice npm ERR! code E403npm ERR! 403 403 Forbidden - PUT http://registry.npmjs.org/portal-portal-cli-hourong - Forbiddennpm ERR! 403 In most cases, you or one of your dependencies are requestingnpm ERR! 403 a package version that is forbidden by your security policy.
我发布包的时候,调整了几次,报错,不是403就是404,那个捉急。下面总结了几个报错检查清单:
- 检查npm包的名字跟已有的包名是否重复,要么就改个名字,或者加后缀
- 如果用的是cnpm源,要改成npm,方法见下面说明registry
- 如果还是报403,你的账号看是不是刚刚注册的,如果是的话,需要进入你的邮箱,验证一下邮箱。
- 版本号是否更新
- 如果以上3步修改了,还是报403错误,就连接手机4g热点再发布一下。
一般发布不了,按照以上5点进行检查,可以解决。
检查第2步npm源的方法
查看本地当前使用的源
registry npm config get registry
切换源
registry npm config set registry
临时切换
registry npm publish --registry
设置完以后,再次查看当前源是否是http://registry.npmjs.org
注意:国内目前发布组件时,必须切换为npmjs,否则npm publish也不会成功
**************
科普npm registry
简单来说,npm registry就相当于一个包注册管理中心。它管理着全世界的开发者们发布上来的各种插件,同时开发者们可以通过npm install的方式安装所需要的插件。
npm官方registry为:http://registry.npmjs.org/
国内速度较快的为:https://registry.npm.taobao.org/
**************
以上涉及到的关键命令:
npm link // 本地调试npm publish // 发布npm whoami //查看当前登陆的用户名
每次更新包需要同步更新版本号,发布的包需要发布72小时以后才可以废弃删除。
二、本地脚手架搭建
上文中,我们既然是搭建脚手架,肯定不能只让它输出一段文字吧,我们还需要定义一些命令,用户在命令行输入这些命令和参数,脚手架会做出对应的操作。这里不需要我们自己去解析这些输入的命令和参数,有现成的轮子commander
可以使用,完全可以满足我们的需要。
- 安装commander
npm install chalk commander download-git-repo inquirer ora --save
- 创建目录 bin/index.js
- package.json 里面bin改为
"bin": { "portal-cli": "bin/index.js" },
当然目录结构你可以随意定义,package.json里面bin从哪里起,主要文件就放哪儿。
- 创建commander init命令
#!/usr/bin/env node
const fs = require('fs');const path = require('path');const chalk = require('chalk'); //命令行输出样式美化const commander = require('commander'); //命令行工具const inquirer = require('inquirer'); //命令行交互const checkDire = require('./utils/checkDire.js');const { exec } = require('child_process');const { version } = require('../package.json');const { promptTypeList } = require('./config');
function resolve(dir) { return path.join(__dirname,'..',dir);}
//version 版本号commander.version(version, '-v, --version') .command('init ') .alias("i") .description("输入项目名称,初始化项目模版") .action(async (projectName,cmd) => { await checkDire(path.join(process.cwd(),projectName),projectName); // 检测创建项目文件夹是否存在 inquirer.prompt(promptTypeList).then(result => { //inquirer 交互问答 const {url, gitName, val} = result.type; console.log("您选择的模版类型信息如下:" + val); console.log('项目初始化拷贝获取中...'); if(!url){ console.log(chalk.red(`${val} 该类型暂不支持...`)); process.exit(1); } exec('git clone ' + url, function (error, stdout, stderr) { //git仓库代码下载 if (error !== null) { console.log(chalk.red( `clone fail,${error}` )); return; } fs.rename(gitName, projectName, (err)=>{ if (err) { exec('rm -rf '+gitName, function (err, out) {}); console.log(chalk.red(`The ${projectName} project template already exist`)); } else { console.log(chalk.green(`✔ The ${projectName} project template successfully create(项目模版创建成功)`)); } }); }); }) });commander.parse(process.argv);
以上代码解析:
1). checkDire
检查创建项目文件夹是否存在
const fs = require('fs');const chalk = require('chalk');const path = require('path');
module.exports = function (dir,name) { let isExists = fs.existsSync(dir); if (isExists) { console.log(chalk.red( `The ${name} project already exists in directory. Please try to use another projectName` )); process.exit(1); //存在则跳出 }};
2). commander init
命令行进入交互问答
3). 交互问答用inquirer
命令交互工具
- question 数组为交互命令配置,数组中每一个对象都对应一个执行命令时候的一个问题
- type为该提问的类型,name为该问题的名字,可以在后面通过name拿到该问题的用户输入答案
- message为问题的提示
- default则为用户没输入时的默认为其提供一个答案
- validate方法可以校验用户输入的内容,返回true时校验通过,若不正确可以返回对应的字符串提示文案
- transformer为用户输入问题答案后将对应的答案展示到问题位置,需要有返回值,返回到字符串为展示内容
具体使用文档:https://github.com/SBoudrias/Inquirer.js
4). 问答结束的回调prompt
方法中then里的参数是一个对象,从配置里面拉取git仓库代码。后面你们使用的时候,拉不下来,看不是不是没有仓库代码权限。
module.exports = { npmUrl: 'https://registry.npmjs.org/xxx-cli', promptTypeList:[{ type: 'list', message: '请选择拉取的模版类型:', name: 'type', choices: [{ name: 'portal前端框架', value: { url: 'http://192.168.3.51/xxx/portal-frame.git', //框架git仓库 gitName: 'portal-frame', val:'portal前端框架'
} }] }],};
5).git clone下载前端框架。也可以用download-git-repo git仓库代码下载
以上,就是全部前端脚手架内容,总共四个文件,index.js是最重要的(引用另外两个配置文件),加上一个package.json。
执行以下命令发布:
npm link // 本地调试npm publish // 发布
三、如何使用?
在需要用到框架的时候,新建空文件夹,执行:
npm install portal-cli -g //全局安装portal-cliportal-cli init //portal-cli init test ,test就是你放文件夹的名称,可以自己定义
这样前端脚手架生成模版命令工具就完成了。如果想更个性化,可以把npm包完善一下,包括包的版本说明,readme;丰富脚手架交互问询内容,美化操作提示等。
结语
node.js,本质还是js,js熟悉以后,结合node依赖和语法,各种试错,调试,需要耐心和细心。
另外,开始做一个实例的时候,构思思路,注意流转顺序。主要以官方文档为主,网上博客文章为辅。
官方的还是靠谱一点,博客各种坑,不是过时了,就是讲的不连贯,没有可执行性。
总的来说,学习也是一个探索的过程,共同进步!
以上【完】
参考:
https://www.cnblogs.com/cangqinglang/p/11225166.html
https://segmentfault.com/a/1190000021390776
Inquirer.js:https://github.com/SBoudrias/Inquirer.js
npm包生命周期:https://segmentfault.com/a/1190000017461666
npm 全局安装vuecli报错_前端脚手架CLI生成模版命令工具(包括,npm包的发布,脚手架的搭建,注意事项,优化等)...相关推荐
- npm 全局安装vuecli报错_cnn explainer本地使用--被npm坑惨
最近在知乎上面看到,看到一个cnn解释器,把每个步揍都很清楚的展示了出来,我想自己搞来玩玩. 第一次使用npm,很多地方不会, 第一步:先在网页上下载下来cnn_explainer,然后解压在没有中文 ...
- npm全局安装 require报错Cannot find module
npm全局安装 require报错Cannot find module 原因:没有设置系统环境变量NODE_PATH,项目内读取不到全局包. 解决方案: 输入以下命令,查看全局包路径, npm roo ...
- Win系统npm全局安装webpack报错解决分享
一.在安装webpack的前提下 1.需要安装好node.js,安装之后检测node和npm的版本 2.安装淘宝镜像 npm config set registry https://registry. ...
- 安装vue-cli报错,提示版本已弃用
安装vue-cli报错(t提示版本已弃用) npm install -g @vue/cli 解决方法: 安装cnmp npm install -g cnpm --registry=https://re ...
- 全局安装gulp 报错问题解决
全局安装gulp 报错问题解决 参考文章: (1)全局安装gulp 报错问题解决 (2)https://www.cnblogs.com/haibiancao/p/10756473.html (3)ht ...
- 使用npm install安装依赖报错
项目场景: 我是安装express脚手架时遇到的,安装proj4库时也遇到了,所以在这里记录一下 问题描述: 使用npm install安装依赖报错,提示信息是 The package-lock.js ...
- java项目导入包报错_转!java web项目 build path 导入jar包,tomcat启动报错 找不到该类...
在eclipse集成tomcat开发java web项目时,引入的外部jar包,编译通过,但启动tomcat运行web时提示找不到jar包内的类,需要作如下配置,将jar包在部署到集成的tomcat环 ...
- 安装fitz报错_解决python 虚拟环境删除包无法加载的问题
项目开发一直在docker的虚拟环境上,遇到了一个问题,就是把虚拟环境的包删掉(rm -rf xxx)之后,再重新拷贝一个(跟原来包一模一样的文件夹)进去发现pycharm再也找不到这个包了,后来在同 ...
- centos7安装uwsgi报错_如何将CentOS 7升级到CentOS 8
在本文中,您将学习如何将CentOS 7升级到CentOS 8.本文描述的步骤尚未描述正式升级,因此不能应用于生产服务器. Upgrade-CentOS-7-to-CentOS-8 步骤1:安装E ...
最新文章
- 【计算理论】计算复杂性 ( 时间复杂度时间单位 : 步数 | 算法分析 | 算法复杂性分析 )
- 用二叉树来理解树状数组
- 《树莓派用户指南(第3版)》——2.1 连接显示器
- yii2地址多级联动
- Java泛型深入理解小总结
- Middle of the Contest
- 钢材规格解读的软件_万维软件ERP五金建材行业解决方案
- 这一领域,互联网巨头纷纷入局!
- amoeba实现mysql主从读写分离_利用Amoeba实现MySQL主从复制和读写分离
- border做三角形
- Elasticsearc 6.x以后不再支持mapping下多个type
- go hash 密码:加密、校验
- DEV、SIT、UAT、PRD的意思
- HBase常用命令使用
- uniapp安卓证书在线制作工具
- 淘思精灵-网赚菜鸟的福音
- 知名建筑景观3D可视化渲染软件lumion10.5
- 计算机领域伟大成就,十五863计划信息技术领域重大科技工作成就
- Ansible#Ansible-Jinja2模板介绍
- 通过U盘传播的“病毒”
热门文章
- 数据算法与结构基本知识
- 机器学习算法--ALS
- spark调用python_在MRS集群中使用Python3.7运行PySpark程序,调用RDD的take函数报错处理...
- DIN+DIEN,机器学习唯一指定涨点技Attention
- 线性代数应该这样讲(二)
- 【错误修正】关于文章《小夕说,不了解动态空间增长的程序喵都是假喵》
- Java远程通讯技术及原理分析
- 【JavaWeb】前端框架之Bootstrap
- 应用安全 - 渗透测试 - .net网站
- [Vuex系列] - Mutation的具体用法