freyhill/blog

🔥程序人生，高效开发，JavaScript，Typescript，React，Vue

• 👋 Hi, I’m @freyhill
• 👀 I’m interested in front-end development
• 🌱 Making code elegant is a habit

blog's Issues

npm疯狂操作

npm，nvm，nrm使用

在前端开发中npm，nvm，nrm是常用的3个工具，下面分享下这三个工具的常用命令。

NPM

npm是NodeJS包管理工具，安装node的同时会安装npm，npm可以下载第三方包到本地，也可以发布自己的包到npm官网。

registry配置

npm registry原意为记录、登记、登记处的意思，这里指的也就是node包存放的服务器地址。

• 查看registry

-> npm config get registry

http://registry.npmjs.org //默认registry

• 修改为淘宝镜像

默认情况下我们执行 npm install * 这个命令时就是从http://registry.npmjs.org 这个服务器上将node包下载到本地，但该服务器在美国，这样下载就会非常慢，所以我们把 registry改为国内淘宝镜像

npm config set registry http://registry.npm.taobao.org  //将registry设置为淘宝镜像

再次查看

-> npm config get registry

http://registry.npm.taobao.org //已修改为淘宝镜像

注意

如果自己本地已经设置为淘宝镜像，在publish本地node包时要改回原地址 不然会报401错误

npm config set registry http://registry.npmjs.org 

一些命令

• 1.查看当前目录下安装了哪些node包

npm ls

• 2.登陆npm

-> npm login

Username: leinov
Password:
Email: (this IS public)
Email: (this IS public) [email protected]
Logged in as leinov on http://registry.npmjs.org/.

• 3.查看当前npm用户

-> npm whoami

leinov //当前用户

如下提示表明还未登陆npm 该命令只在登陆状态下使用，或者使用npm adduser添加新用户

npm ERR! code ENEEDAUTH
npm ERR! need auth this command requires you to be logged in.
npm ERR! need auth You need to authorize this machine using `npm adduser`

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/leinov/.npm/_logs/2018-09-14T08_13_10_900Z-debug.log

• 4.查看当前目录下安装了哪些node包

-> npm ls

[email protected] /Users/*/node/xcx
└── [email protected] extraneous

• 5.发布本地包

进入本地项目目录执行下面命令

-> npm publish 

+ [email protected] //发布成功 可通过网页进入npmjs.org查看自己上传的包

• 6.查看node安装路径

npm get prefix

/Users/leinov/.nvm/versions/node/v8.11.3

• 7.查看全局node包

 $ npm root -g 
  
  /Users/leinov/.nvm/versions/node/v8.11.3/lib/node_modules

• 8.npm清理缓存

npm cache clean -f

NVM

nvm是node版本管理工具，可以通过nvm的来切换不同版本的node

1. 安装

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

2. .zshrc

安装完后会有如下配置提示

=> nvm source string already in /Users/leinov/.zshrc
=> bash_completion source string already in /Users/leinov/.zshrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

3.重启终端输入nvm

NVM

如果没有内容就说明安装没有成功

4. 未成功

在 ～/目录下查看.bash_profile 如果没有就新建一个.bash_profile文件 将下面内容粘贴到文件里

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

然后sourse一下

source .bash_profile

5.使用nvm

安装稳定版本

nvm install stable 

安装某个版本

nvm install 5.7.0 

查看所有可安装版本

nvm ls-remote

查看所有已安装版本

nvm ls

查看当前版本

nvm current

查看当前版本node路径

nvm which current

切换到某个版本

nvm use 8.11.3

设置默认版本

nvm alias default 8.11.3

6.使用淘宝镜像安装node

正常使用nvm install 会非常慢，所以使用淘宝镜像安装，在 ~/.zshrc文件里添加下面这两行 然后执行install可以从国内下载

export NVM_NODEJS_ORG_MIRROR="http://npm.taobao.org/mirrors/node"
source ~/.nvm/nvm.sh

7.Mac OS "troubleshooting"

nvm node version not found in vim shell

If you set node version to a version other than your system node version nvm use 6.2.1 and open vim and run :!node -v you should see v6.2.1 if you see your system version v0.12.7. You need to run:

sudo chmod ugo-x /usr/libexec/path_helper

NRM

nrm是一个npm源(registry)管理器，registry是指npm下载包的仓库地址，通过下面命令可以获得npm的源

npm config get registry

默认情况下是

http://registry.npmjs.org

由于该服务器在国外，下载会很慢，所以就有了国内的仓库,我们可以通过下面命令将npm的源设置为淘宝的源，这样会下载的更快，

npm config set registry http://registry.npm.taobao.org 

但大公司会有自己的内部registry，如果经常切换会很麻烦，所以就出现了nrm，nrm可以帮助开发者快速的切换registry。

安装

npm install -g nrm

显示所有的registry

nrm ls


npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
taobao - https://registry.npm.taobao.org/
nj ----- https://registry.nodejitsu.com/
npmMirror  https://skimdb.npmjs.com/registry/
edunpm - http://registry.enpmjs.org/
* myc---- http://ued.myc.cc/npm/

当前使用的是myc这个公司内部的源，如果我们想切回npm默认的registry

nrm use taobao

添加公司的源

nrm add myc http://ued.myc.cc/npm

使用Vue CLI创建typescript项目

使用最新的Vue CLI @vue/cli创建typescript项目，使用vue -V查看当前的vue cli版本

安装命令

npm install -g @vue/cli

创建项目

vue create my-vue-typescript

上下键选择，空格键确定

接下来是一些常规选项

下面是询问要不要记录这次配置以便后面直接使用，我们选择y

当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录

{
  "useTaobaoRegistry": true,
  "presets": {
    "my-vue-typescript": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-typescript": {
          "classComponent": true,
          "tsLint": true,
          "lintOn": [
            "save"
          ],
          "useTsWithBabel": true
        }
      },
      "router": true,
      "routerHistoryMode": true,
      "vuex": true
    }
  }
}

然后再回车就开始创建项目，但是这里却报了一个错，大概意思是源有问题。

ERROR  command failed: yarn --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist

于是搜了下原因，原来是创建时候的默认源配置导致，vue cli 安装报错问题解决

所以修改下刚才生成的.vuerc下的useTaobaoRegistry属性值为false就可以了

{
  "useTaobaoRegistry": false,
   ...
}

再次安装成功

机械键盘清洁

这是一个平常的周日早晨，我醒来去洗完脸坐在桌前发呆，本来跟伙计们越好去奥森跑10公里，但计划夭折了。坐着突然想起昨晚做的一个梦。梦里我在清洁我的键盘，我不知道为什么会做这样的梦。可能是因为我昨晚上注视着键盘太久，还是键盘确实太脏了。不管怎样，竟然都梦到在清洁键盘了那就清洁它。就像前阵子我突然梦到初中时候的很多场景，还有我的英语老师，于是第二天我就往老同学要了老师的微信，跟老师聊了聊天，十几年没见突然跟老师聊天感觉真的很棒，Let‘s Do It！。

拔键帽

这是一个机械键盘，所以在买的时候店家送了拔键帽的工具和清理刷子。这样看这个键盘可能视觉上感觉并不是很脏，也可能是相机美颜了，或者高光的原因。

拔键帽的感觉还是蛮爽的

但是再拔几个就不是很爽了，因为过程很机械。

终于拔完了

我们来看下按键缝隙处，啧啧啧，真脏！有指甲壳，油滴，毛线，最多的还是头发，看来发际线越来越高是有依据的。真的很脏，如果你正在吃东西看到这里，我表示抱歉～

清洁

下面我们用小毛刷清理缝隙，这个过程很快，克里马擦就刷完了，不过还有些细节比较顽固，得用湿巾擦了。

我用一个小镊子倦了个湿巾来擦一些细节，比如油滴呀，水渍呀什么的。那些油一定是趴在桌上嗦粉溅进去的。

键盘缝隙清理干净，什么头发油滴的统统干掉。

接下来清洁剪帽，其实看着也不是很脏，就是擦下，开始我想全扔到盆里洗吧，但还是的每个擦而且还要晾干，所以就想还是一个个擦吧。

擦键帽这个过程很无脑很机械，就是一个一个的擦，有点枯燥。我有个初中同学，初中毕业后就南下去富士康打工了，后来有次回去跟他聊天，他说他在厂里的工作很机械：分线。就是传送带传送过来的蓝色的线头跟红的线头分开，他干了一年回来了，说再干下去自己就傻了甚至会抑郁。当然擦个键帽不会擦抑郁额。

安装键帽

最后一步，安装键帽，在安装键帽的时候我在想我能不能盲安呢，当然不是蒙着眼睛安额，是靠对键盘的位置的记忆来安装，但是我想了下，这个可能有点费劲，于是我就把字母的这一块儿留下来，把其他的按照拍的照片安起来，字母这块儿是我们日常最常用的键了。于是在安完其他的后我开始试着不看图片的情况下安字母。

.........太简单了，毕竟都盲打十几年了，分分钟装完了。

结语

其实还是要平时保养好，用完键盘把盖子盖上，清洁键盘早上花了一小时，又拆又装还是挺费劲的，ok，去吃饭！