npm使用记录


阅读数:   

npm 缩写写法说明

i 是install 的简写

-s就是–save的简写

-d就是–save-dev的简写

默认 npm install 安装的是所有包，相当于 npm install -s 加 npm install -d

npm install出现错误

  1. 需要排除是否是版本问题，这个可以看报错信息。如果是版本过低，可以升级下node和npm。

  2. 可能是安装的错误文件还在node_modules文件夹内，使用命令npm cache clean --force清除该文件夹并使用命令npm install重新安装。

  3. 需要排查是否npm源的问题，原始源可能存在下载部分包错误，可以使用nrm来切换源继续第二步。

  4. 上面基本可以解决我遇到的大多数问题，如果问题依旧无法解决，使用淘宝的cnpm或者yarn工具代替npm安装。

    1
    2
    npm install cnpm -g
    cnpm install

有的时候也需要删除package-lock.json文件

发布个人模块到NPM站点

  1. 前往 https://www.npmjs.com/signup 注册账号

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 1. 进入要发布的工程目录(这里我随意创建一个演示项目，如果项目已存在可以直接跳到第3步。)
    mkdir ionluo-test
    # 2. 初始化项目
    npm init -y
    # 3. 添加用户，输入在NPM官网注册的账户、密码、邮箱号、二次验证码
    # 如果已经添加过了，或者有多个账号，使用npm login登录指定用户账号,通过npm whoami 查看当前登录账号
    npm adduser
    # 4. 发布项目到NPM站点
    npm publish

    注意：

    1. 如果使用淘宝或者其他源会报错npm ERR! 403 403 Forbidden - PUT https://registry.npm.taobao.org/myprojects - [no_perms] Private mode enable, only admin can publish this module，需要切回官方源（切换后别忘了重新登录）。

    这里推荐使用nrm 管理源：

    nrm ls ： 列出所有源

    nrm use npm 使用npm源

    或者直接使用原始命令切换回npm源：

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

    1. 报错npm ERR! 403 In most cases, you or one of your dependencies are requesting a package version that is forbidden by your security policy.

      百度搜索了很久没有找到问题，根据提示也行不通，后来发现是邮箱没有验证，去注册邮箱验证下就好了。

      https://stackoverflow.com/questions/62830477/how-to-debug-npm-err-403-in-most-cases-you-or-one-of-your-dependencies-are-re

      1609478246532

    2. npm publish报错 npm ERR! 402 Payment Required - PUT https://registry.npmjs.org/@xxx%2fxxx - You must sign up for private packages 问题
      这个当你的包名为@your-name/your-package时才会出现，原因是当包名以@your-name开头时，npm publish会默认发布为私有包，但是 npm 的私有包需要付费，所以需要添加如下参数进行发布:

      1
      npm publish --access public

  2. 到NPM官网查看项目是否发布成功

    1609478452375

    https://www.npmjs.com/search?q=ionluo-test

  3. 扩展：npm包有何规范？

    npm 没有强制要求。

    主要知道三点即可，需要package.json文件，package.json里面用main标记入口文件，使用.npmignore屏蔽掉不需要发布的文件。

    一般node项目目录规范：

    • src：源码源文件。
    • lib：依赖文件（没通过 npm，直接下载源码的那种）。
    • node_modules：npm 依赖文件。
    • bin：二进制可执行文件。
    • tests：单元测试或集成测试文件。
    • docs：文档、开发手册。
    • examples：示例代码或项目。
    • build：构建时所需文件。
    • dist：打包后的输出目录。

  4. 将开源包替换成自己的包

    1
    2
    # 将layui的包用自己的代替，这样子代码中引用也不需要修改了
    npm i layui-src@npm:@ionluo/layui-src@2.3.0-beta1.0

npm设置代理

1
2
$ npm config set proxy http://server:port
$ npm config set https-proxy http://server:port

如果代理需要认证的话可以这样来设置。

1
2
$ npm config set proxy http://username:password@server:port
$ npm config set https-proxy http://username:pawword@server:port

如果代理不支持https的话需要修改npm存放package的网站地址。

1
2
$ npm config set registry "http://registry.npmjs.org/"
# npm config set registry "http://mirrors.cloud.tencent.com/npm/"

删除

1
2
$ npm config delete proxy
$ npm config delete https-proxy http://server:port

优雅的修改第三方依赖包

原文请点击标题链接

背景

Vue项目中使用的element-ui，由于弹窗里表单项太多，一些表单项会在可视范围之外。校验表单时，如果未通过校验的表单项在可视范围外，用户感知不强。所以需要在表单校验未通过时滚动到第一个未通过校验的表单项那里，翻看element-ui文档，发现未提供该API。

起初想到的方案有两种：

  1. 在业务中封装函数，表单校验失败时调用该函数，根据表单校验失败的className，获取第一个校验失败的dom元素，滚动到指定的dom元素位置。但是如果页面存在多个form表单需要做区分，会增加我们的一个工作量，并且不够优雅。
  2. 修改element-ui的源码，增加一个API。但是在平台编译时如果重新执行npm install时代码会被覆盖，并且团队协作时也会遇到这个问题，团队开发中有诸多不便。

后面经过一顿搜索后，发现一个“黑魔法”的解决方案。并且该方案上手简单、便携、且一劳永逸。

黑魔法之patch-package

img

先看看官方是怎么介绍的

patch-package lets app authors instantly make and keep fixes to npm dependencies. It’s a vital band-aid for those of us living on the bleeding edge.
Patches created by patch-package are automatically and gracefully applied when you use npm(>=5) or yarn.
No more waiting around for pull requests to be merged and published. No more forking repos just to fix that one tiny thing preventing your app from working.

总而言之，patch-package给开发者提供了通过打“补丁”的方式，使得重新安装依赖包时能够保留之前对第三方依赖包的修改的一种解决方案。

patch-package的应用场景

想想我们在使用第三方依赖包时如果遇到了bug，通常解决的方式都是绕过这个问题，使用其他方式解决，较为麻烦。或者给作者提个issue或者PR，然后等待作者的修复。等待的时间不可控，如果你不想天天被产品、测试后面追着，是不是就可以借助patch-package自己动手去修复该bug，感觉是不是很棒。并且还可以在第三方依赖包上，根据业务需求扩展能力。

Tip：最好还是扩展一些通用性比较高的能力，如果是比较通用且该能力大多数开发者都有这种诉求的话可以给第三方依赖包提个PR。参与开源项目是不是简单了起来了～（不要在魔改的路上越走越远！！！）

patch-package的使用

Step1：安装

使用npm安装

1
npm i patch-package

使用yarn安装

1
yarn add patch-package postinstall-postinstall

为什么要使用yarn安装需要多安装postinstall-postinstall这个依赖，有兴趣可以看官方解释。**Why use postinstall-postinstall**

Step2：修改package.json文件

package.json的scripts中声明了一系列的npm脚本命令，如下：（参考资料：http://caibaojian.com/npm/misc/scripts.html）

  • prepublish: 在包发布之前运行，也会在npm install安装到本地时运行
  • publish,postpublish: 包被发布之后运行
  • preinstall: 包被安装前运行
  • install,postinstall: 包被安装后运行
  • preuninstall,uninstall: 包被卸载前运行
  • postuninstall: 包被卸载后运行
  • preversion: bump包版本前运行
  • postversion: bump包版本后运行
  • pretest,test,posttest: 通过npm test命令运行
  • prestop,stop,poststop: 通过npm stop命令运行
  • prestart,start,poststart: 通过npm start命令运行
  • prerestart,restart,postrestart: 通过npm restart运行

可以看到依赖包在安装完之后会执行postinstall命令

所以我们在package.json的scripts里面增加："postinstall": "patch-package"

1
2
3
4
"scripts": {
    ***,
+   "postinstall": "patch-package"
}

Step3：修改依赖包源码

以element-ui为例：

img

我们在element-ui的Button组件上加一个类名button看看

img

通过控制台查看我们的修改已经生效

Step4：生成补丁

1
2
3
yarn patch-package package-name(修改的包名)
或者
npx patch-package package-name（npm版本 > 5.2）

这里我们执行npx patch-package element-ui命令看看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
feiyu@feiyudeMacBook-Pro demo % npx patch-package element-ui
patch-package 6.4.7
patch-package: you have both yarn.lock and package-lock.json
Defaulting to using npm
You can override this setting by passing --use-yarn or deleting
package-lock.json if you don't need it

• Creating temporary folder
• Installing element-ui@2.15.6 with npm
• Diffing your files with clean files
✔ Created file patches/element-ui+2.15.6.patch

  element-ui is on GitHub! To draft an issue based on your patch run

    npx patch-package element-ui --create-issue

可以看到patch-package已经为我们创建了一个补丁。

默认会在我们的根目录下创建一个patches文件夹。在patches文件夹下会创建依赖包名+版本号.patch的文件，文件描述了我们修改了什么，第几行，有点像git的提交记录。

img

Step5：测试补丁是否有效

  • 手动删除node_modules文件夹，重新执行npm install安装依赖包。可以看到在依赖包安装结束后执行了patch-package命令，之前生成的补丁被应用了。
    > patch-package

    patch-package 6.4.7
    Applying patches…
    element-ui@2.15.6 ✔

  • 查看node-modules中之前修改的element-ui修改的地方，查看之前修改的代码是否还存在。如果之前修改的代码还存在，说明补丁文件已经生效了，如果不存在，排查下是否哪个步骤出现了问题。

最后将patches文件夹推送到远端仓库，日后无论是谁拉取代码，安装依赖，我们之前修改的部分都会生效的

注意事项

  1. patch是锁定版本号的，如果升级了版本，patch内容将会失效，最好在package.json能够锁定版本号。
  2. 魔改的同时，也局限了升级的能力，尽量还是去提issue和PR。

最后

patch-package还提供了一些额外的参数，有兴趣的话可以查看官方文档。

参考资料

patch-package-官方：https://github.com/ds300/patch-package

npm-scripts文档：http://caibaojian.com/npm/misc/scripts.html

Why use postinstall-postinstall：https://github.com/ds300/patch-package#why-use-postinstall-postinstall-with-yarn

我遇到的错误以及处理方法

  1. npm或yarn安装报错 Error: EPERM: operation not permitted, unlink......

    • 删除node modules中的全部文件

      1
      2
      3
      4
      5
      6
      7
      # 方法1：手动删除node_modules文件
      # 方法2：命令删除
      # Linux 
      rm -rf node_modules
      # Window
      npm install -g rimraf
      rimraf node_modules

    • 清除Npm缓存

      1
      2
      3
      # 方法1：手动删除 C:\Users\用户名.npmrc 文件
      # 方法2：命令删除
      npm cache clean --force

      如果依旧报错，删除yarn.lock或者package.json.lock文件

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/acd31464.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
知识共享许可协议

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true