diyxiaoshitou

diyxiaoshitou 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

diyxiaoshitou 收藏了文章 · 9月28日

npm发布包教程(五):废弃/删除

npm包发布后可以对包进行废弃或删除操作,废弃和删除的区别在于:

  • 废弃不会将包或版本从npm仓库删除,仍然可以继续下载安装,并在安装的时候会有警示
  • 删除会将包从npm彻底删除,无法被下载安装

无论是废弃还是删除,都包含两个层面:

  • 版本的废弃/删除
  • 包的废弃/删除

一、废弃

废弃原因:

  • 版本:鼓励用户更新最新版本
  • 包:此包内容已经过时,没有了维护的价值

第一步:废弃指定版本
语法:npm deprecate <pkg>[@<version>] <message>

我们以yuyy-test-pkg为例:

npm deprecate yuyy-test-pkg@1.1.0 'test deprecate'

执行后我们用npm view yuyy-test-pkg versions查看版本:

clipboard.png

记录的版本号并无变化。

第二步:安装废弃版本
切换到test-my-pkg目录下,执行:

npm i yuyy-test-pkg@1.1.0

运行结果:

clipboard.png

第三步:运行index.js
在test-my-pkg目录下

node index.js

结果:
clipboard.png

所以,废弃的包除了安装时会有警示,并不影响使用。

二、删除

npm不鼓励任何形式的删除,主要因为我们发布的包可能已经被其他人引用,如果我们删除了此包,其他人在重新安装含有我们包的依赖的工程时,出现找不到包问题。

基于此,npm做了相关的删除限制:

  • 删除的版本24小时后方可重发!
  • 只有发布72小时之内的包可以删除!

第一步:删除发布的包
我们之前在《npm发布包教程(二):发布包》发布的包仅为演示所用,为保持npm仓库的纯净,我们都删除掉:

npm unpublish yuyy-test-pkg --force
npm unpublish @yuyy/babel --force

第二步:去官网查找

clipboard.png

clipboard.png

第二步
切换到test-my-pkg目录下,先将两个包卸载:

npm rm yuyy-test-pkg @yuyy/babel

结果:

clipboard.png

然后再重新安装:

npm i yuyy-test-pkg @yuyy/babel

结果:

clipboard.png

已经删除的包无法再安装。

至此,我们完成npm包的整个生命周期的演示过程,大家可以开源的道路上又多了一条很重要的道路。

最后,我觉得作为一个开发者,我们有责任和义务维护每一个社区的纯净,所以在发布npm包的时候应该尽量精益求精,避免发一些没有价值的东西给其他人造成困扰。构建美好生态,人人有责。

相关文章:
1.《npm发布包教程(一):从npm说起》
2.《npm发布包教程(二):发布包》
3.《npm发布包教程(三):安装发布包》
4.《npm发布包教程(四):迭代》
5.《npm发布包教程(五):废弃/删除》

查看原文

diyxiaoshitou 发布了文章 · 9月12日

mac/linux中vim永久显示行号、开启语法高亮

步骤1

 

 cp /usr/share/vim/vimrc ~/.vimrc

  先复制一份vim配置模板到个人目录下

  注:redhat 改成 cp /etc/vimrc ~/.vimrc

步骤2

 

 vi ~/.vimrc

  进入insert模式,在最后加二行

 syntax on

 set nu!

保存收工。



set nocompatible                 "去掉有关vi一致性模式,避免以前版本的bug和局限    

set nu!                                    "显示行号

set guifont=Luxi/ Mono/ 9   " 设置字体,字体名称和字号

filetype on                              "检测文件的类型     

set history=1000                  "记录历史的行数

set background=dark          "背景使用黑色

syntax on                                "语法高亮度显示

set autoindent                       "vim使用自动对齐,也就是把当前行的对齐格式应用到下一行(自动缩进)

set cindent                             "(cindent是特别针对 C语言语法自动缩进)

set smartindent                    "依据上面的对齐格式,智能的选择对齐方式,对于类似C语言编写上有用   

set tabstop=4                        "设置tab键为4个空格,

set shiftwidth =4                   "设置当行之间交错时使用4个空格     

set ai!                                      " 设置自动缩进 

set showmatch                     "设置匹配模式,类似当输入一个左括号时会匹配相应的右括号      

set guioptions-=T                 "去除vim的GUI版本中得toolbar   

set vb t_vb=                            "当vim进行编辑时,如果命令错误,会发出警报,该设置去掉警报       

set ruler                                  "在编辑过程中,在右下角显示光标位置的状态行     

set nohls                                "默认情况下,寻找匹配是高亮度显示,该设置关闭高亮显示     

set incsearch                        "在程序中查询一单词,自动匹配单词的位置;如查询desk单词,当输到/d时,会自动找到第一个d开头的单词,当输入到/de时,会自动找到第一个以ds开头的单词,以此类推,进行查找;当找到要匹配的单词时,别忘记回车 

set backspace=2           " 设置退格键可用

注:如果是mac,更好的办法是直接换掉默认的终端,改用zsh

查看原文

赞 0 收藏 0 评论 0

diyxiaoshitou 发布了文章 · 9月11日

安装angualr cli 指定版本

1.卸载之前的版本

npm uninstall -g @angular/cli

2.检查是否卸载干净,输入命令

 ng version

若显示 command not found: ng 则卸载干净

3.安装指定版本

npm install -g @angular/cli@8.0.6

5.检查版本号

ng version


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.1.12
Node: 14.5.0
OS: darwin x64

Angular: 9.1.12
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.12
@angular-devkit/build-angular     0.901.12
@angular-devkit/build-optimizer   0.901.12
@angular-devkit/build-webpack     0.901.12
@angular-devkit/core              9.1.12
@angular-devkit/schematics        9.1.12
@ngtools/webpack                  9.1.12
@schematics/angular               9.1.12
@schematics/update                0.901.12
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

显示这些信息,恭喜你,表示你已经安装成功;

查看原文

赞 0 收藏 0 评论 0

diyxiaoshitou 发布了文章 · 9月10日

Cannot instantiate cyclic dependency

angualr:8.0.6
产生的原因是,旧的版本会出现循环引用依赖错误;
出现场景:
user.service.ts

import {Injectable} from '@angular/core';  
import {of} from 'rxjs';  
import {ActivatedRoute, Router} from '@angular/router';  
import {tap} from 'rxjs/operators';  
  
@Injectable({  
  providedIn: 'root'  
})  
export class UserService {  
  
  constructor(  
    private router: Router,  
 private route: ActivatedRoute  
  ) {  
  }  
  
  loginByToken() {  
    console.log('init start');  
  
 return of('111').pipe(tap(() => {  
      setTimeout(() => {  
        this.router.navigateByUrl('/login');  
 }, 2000);  
 }));  
 }  
  
}

解决方案是,去掉下面的依赖项

private router: Router,  
private route: ActivatedRoute

angular9 和 angular10 已经解决了这个问题。不用去掉路由的部分;

查看原文

赞 0 收藏 0 评论 0

diyxiaoshitou 发布了文章 · 9月2日

webstorm使用

webstorm版本:2020.1.1
系统:mac

一、下载代理文件

代理需要的文件下载,存放一个固定位置,请勿删除
链接: https://pan.baidu.com/s/1GYfC... 提取码: jgbn 复制这段内容后打开百度网盘手机App,操作更方便哦

二、读取代理文件

设置 help/Edit Custom Vm Options,注意 javaagent: 为代理文件的路径

-Xms128m
-Xmx2048m
-XX:ReservedCodeCacheSize=240m
-XX:+UseCompressedOops
-Dfile.encoding=UTF-8
-XX:+UseConcMarkSweepGC
-XX:SoftRefLRUPolicyMSPerMB=50
-ea
-XX:CICompilerCount=2
-Dsun.io.useCanonPrefixCache=false
-Djava.net.preferIPv4Stack=true
-Djdk.http.auth.tunneling.disabledSchemes=""
-XX:+HeapDumpOnOutOfMemoryError
-XX:-OmitStackTraceInFastThrow
-Djdk.attach.allowAttachSelf
-Dkotlinx.coroutines.debug=off
-Djdk.module.illegalAccess.silent=true
-Xverify:none

-XX:ErrorFile=$USER_HOME/java_error_in_webstorm_%p.log
-XX:HeapDumpPath=$USER_HOME/java_error_in_webstorm.hprof
-javaagent:/Users/feng/Applications/jetbrains-agent/jetbrains-agent.jar

三、进行注册 help/register

选择 License server,填入 http://fls.jetbrains-agent.com

注册完成

查看原文

赞 0 收藏 0 评论 0

diyxiaoshitou 发布了文章 · 8月6日

info There appears to be trouble with your network connection

使用 npx create-react-app 项目名 新建项目时,报错;

yarn add v1.22.4
info No lockfile found.
[1/4] 🔍  Resolving packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...

解决途径:

第一步:更换淘宝镜像

yarn config set registry https://registry.npm.taobao.org

第二步:按下面的操作

  1. 全局安装nrm: npm install nrm -g;
  2. 查看镜像源: nrm ls;
  3. 切换镜像源: nrm use npm;
  4. 安装需要的模块: npm install <package-name>;
  5. 如果需要安装全部依赖: npm install;
查看原文

赞 0 收藏 0 评论 0

diyxiaoshitou 发布了文章 · 6月30日

clientWidth和offsetWidth的区别

clientWidth

是一个只读属性,返回元素的内部宽度,该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距。
用法:

var offsetWidth = element.clientWidth;

计算方法:

clientWidth = width + padding

offsetWidth

是一个只读属性,返回一个元素的布局宽度。一个典型的offsetWidth是测量包含元素的边框、水平线上的内边距、竖直方向滚动条(如果有的话)、以及CSS设置的宽度(width)值。

用法:

var offsetWidth = element.offsetWidth;

计算方法:

clientWidth = width + padding + scrollWidth + border
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #parent {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="parent"></div>
    <script>
        var clientWidth = window.document.getElementById("parent").clientWidth;
        var offsetWidth = window.document.getElementById("parent").offsetWidth;
        console.log(clientWidth);  //200
        console.log(offsetWidth);  //200
    </script>
</body>

</html>

当我们给上面parent元素加上边框内边距时:

 #parent {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 10px solid black;
            padding: 10px;
        }

显示结果如图:
image.pngimage.png
输出结果为:
// clientWidth: 220
// offsetWidth: 240

计算规则

(clientWidth)220 = 200(width) + 10(padding) + 10(padding)
(offsetWidth)240 = 200(width) + 10(padding) + 10(padding) + 10(border) + 10(border)

现在我们给parent加一个子元素,并让滚动条出现,完整代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #parent {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 10px solid black;
            padding: 10px;
            overflow: auto;
        }
        
        #son {
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div id="parent">
        <div id="son"></div>
    </div>
    <script>
        var clientWidth = window.document.getElementById("parent").clientWidth;
        var offsetWidth = window.document.getElementById("parent").offsetWidth;
        console.log(clientWidth);
        console.log(offsetWidth);
    </script>
</body>

</html>

显示结果如图:
image.pngimage.png

输出信息如下:
// 205
// 240
对于上述代码作个简要说明,clientWidth值为205是这样计算来的:原本我们设置parent的宽度为200,因为我们设置了父元素overflow:scroll属性出现滚动条后,滚动条宽度被包括在这个设置的宽度之内。chrome浏览器滚动条默认宽度为15,所以parent宽度就只剩185。
计算规则:
(clientWidth)205 = 185(实际width) + 10(padding) + 10(padding)
(offsetWidth)240 = 185(实际width) + 10(padding) + 10(padding) + 10(border) + 10(border) + 15(scrollWidth)

查看原文

赞 0 收藏 0 评论 0

diyxiaoshitou 发布了文章 · 2019-12-09

windows下安装node版本管理工具及nvm use切换不成功问题解决

nvm最新的下载地址

Node版本管理器--nvm,可以运行在多种操作系统上。nvm for windows 是使用go语言编写的软件。 我电脑使用的是Windows操作系统,所以我要记录下在此操作系统上nvm的安装和使用。

下载

nvm-windows 最新下载地址:
https://github.com/coreybutler/nvm-windows/releases
如图所示:

图1:nvm-windows版本.png

我目前看到有两个版本【Pre-release 1.1.6】和 【Latest release 1.1.5],我们下载目前稳定版本1.1.5就可以了。1.1.6版本是最新版本,可能还不是很稳定。
而这里又有四个可下载的文件。

  • nvm-noinstall.zip: 这个是绿色免安装版本,但是使用之前需要配置
  • nvm-setup.zip:这是一个安装包,下载之后点击安装,无需配置就可以使用,方便。
  • Source code(zip):zip压缩的源码
  • Sourc code(tar.gz):tar.gz的源码,一般用于*nix系统

我对这个目前只是简单使用,为了方便,所以下载了nvm-set.zip文件。

安装和升级

安装之前的操作

请注意: 在安装nvm for windows之前,你需要卸载任何现有版本的node.js。并且需要删除现有的nodejs安装目录(例如:"C:\Program Files\nodejs’)。因为,nvm生成的symlink(符号链接/超链接)不会覆盖现有的(甚至是空的)安装目录。
你还需要删除现有的npm安装位置(例如“C:\Users\weiqinl\AppData\Roaming\npm”),以便正确使用nvm安装位置。

安装

以上操作完成之后,双击执行下载的setup文件,

图2:双击之后的界面

Next之后,选择同意协议,之后选择nvm的本地安装目录,这里注意,nvm的安装路径名称中最好不要有空格。

图3:nvm的安装目录

例如最好不要这样有空格的~\Program Files\nvm,我这里选择的是D:\softtool\nvm
点击Next,跳转到设置 Node.js的Symlink,即需要设置nodejs的快捷方式存放的目录。

图4:nodejs安装的目录

之后,点击Next-->Install-->Finish完成本次安装。

检测

检查是否安装成功,我们可以在新的命令窗口中输入

nvm
  • 如果出现nvm版本号和一系列帮助指令,则说明nvm安装成功。
  • 否则,可能会提示nvm: command not found

图5:nvm安装成功检测

升级

如果要升级的话,请重新下载最新的安装程序。并直接运行安装程序。它将安全的覆盖需要更新的文件,而无需关心nodejs的安装。
此次安装需要确保和上次使用相同的安装目录。
如果你最初安装到默认位置,则只需一直点击"下一步",直到完成。

使用

nvm for windows是一个命令行工具,在控制台输入nvm,就可以看到它的命令用法。基本命令有:

  • nvm arch [32|64] : 显示node是运行在32位还是64位模式。指定32或64来覆盖默认体系结构。
  • nvm install <version> [arch]: 该<version>可以是node.js版本或最新稳定版本latest。(可选[arch])指定安装32位或64位版本(默认为系统arch)。设置[arch]为all以安装32和64位版本。在命令后面添加--insecure ,可以绕过远端下载服务器的SSL验证。
  • nvm list [available]: 列出已经安装的node.js版本。可选的available,显示可下载版本的部分列表。这个命令可以简写为nvm ls [available]
  • nvm on: 启用node.js版本管理。
  • nvm off: 禁用node.js版本管理(不卸载任何东西)
  • nvm proxy [url]: 设置用于下载的代理。留[url]空白,以查看当前的代理。设置[url]none删除代理。
  • nvm node_mirror [url]:设置node镜像,默认为https://nodejs.org/dist/.。我建议设置为淘宝的镜像_https://npm.taobao.org/mirrors/node/_
  • nvm npm_mirror [url]:设置npm镜像,默认为https://github.com/npm/npm/archive/。我建议设置为淘宝的镜像_https://npm.taobao.org/mirrors/npm/_
  • nvm uninstall <version>: 卸载指定版本的nodejs。
  • nvm use [version] [arch]: 切换到使用指定的nodejs版本。可以指定32/64位[arch]。nvm use <arch>将继续使用所选版本,但根据提供的值切换到32/64位模式的<arch>
  • nvm root [path]: 设置 nvm 存储node.js不同版本的目录 ,如果<path>未设置,将使用当前目录。
  • nvm version: 显示当前运行的nvm版本,可以简写为nvm v

一个nodejs的安装使用流程:

nvm ls   // 查看目前已经安装的版本
nvm install 6.10.0  // 安装指定的版本的nodejs
nvm use 6.10.0  // 使用指定版本的nodejs

这是我安装第一个版本时候的命令:

图6:这是我安装第一个版本时候的命令

认真看以下的图,相同的nvm ls命令,得到的结果为什么不一样?因为,这是使用了nvm切换到了指定的版本。如果在nvm ls命令输出了 当前样式,说明切换成功了。如果没有出现(Currently using 64-bit executable),则表示没有切换成功。这就需要查看原因,认真按照上面步骤来。

图7:nvm ls展示已经安装的nodejs版本

使用命令时注意点

  • 请用管理员身份运行命令管理器,否则可能出错。
  • 先设置nodenpm的淘宝镜像,这样成功率和下载速度会更高点。

用途

1:主要用途,切换nodejs版本。如果想使用最新的流行版本测试您正在开发的模块,而不用卸载稳定版本的node,则可以使用nvm来切换nodejs版本。

注意点

  • nvm安装目录,最好不要存在空格。否则,nvm可以安装成功,但使用nvm use x.y.z(nodejs的切换)会有问题。
  • 有些全局的npm模块,可能在各版本的node.js之间不共享。
    你正在使用的node.js版本中可能不支持某些npm模块。因此在工作的时候请注意工作环境。
  • 要注意 变量的配置

image.png
image.png

查看原文

赞 0 收藏 0 评论 0

认证与成就

  • 获得 3 次点赞
  • 获得 8 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 8 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-02-22
个人主页被 302 人浏览