# NPM and Plugin Guide *** ## 版本 * NPM ## package.json ### peerDependency > In some cases, you want to express the compatibility of your package with a host tool or library, while not necessarily doing a require of this host. This is usually referred to as a plugin. Notably, your module may be exposing a specific interface, expected and specified by the host documentation. > > 通常是在插件开发的场景下，你的插件需要某些依赖的支持，但是你又没必要去安装，因为插件的宿主会去安装这些依赖，你就可以用peerDependencies去声明一下需要依赖的插件和版本，如果出问题npm就会有警告来提醒使用者去解决版本冲突问题。(翻译出处之一) ## NPM 日常使用 ### 新建项目 ```shell # Commands tested on windows mkdir projectName cd projectName # 1. 根据提示输入，一步一步创建 package.json; npm init # 2. 直接初始化一个默认的 package.json (y = yes) npm init -y mkdir src cd src echo off > index.js ``` ### 常用命令 ```shell nvm -v //检查nvm是否安装成功 Running version 1.1.7. Usage: nvm arch : Show if node is running in 32 or 64 bit mode. nvm install [arch] : The version can be a node.js version or "latest" for the latest stable version. Optionally specify whether to install the 32 or 64 bit version (defaults to system arch). Set [arch] to "all" to install 32 AND 64 bit versions. Add --insecure to the end of this command to bypass SSL validation of the remote download server. nvm list [available] : List the node.js installations. Type "available" at the end to see what can be installed. Aliased as ls. nvm on : Enable node.js version management. nvm off : Disable node.js version management. nvm proxy [url] : Set a proxy to use for downloads. Leave [url] blank to see the current proxy. Set [url] to "none" to remove the proxy. nvm node_mirror [url] : Set the node mirror. Defaults to https://nodejs.org/dist/. Leave [url] blank to use default url. nvm npm_mirror [url] : Set the npm mirror. Defaults to https://github.com/npm/cli/archive/. Leave [url] blank to default url. nvm uninstall : The version must be a specific version. nvm use [version] [arch] : Switch to use the specified version. Optionally specify 32/64bit architecture. nvm use will continue using the selected version, but switch to 32/64 bit mode. nvm root [path] : Set the directory where nvm should store different versions of node.js. If is not set, the current root will be displayed. nvm version : Displays the current running version of nvm for Windows. Aliased as v. ``` ## 基本用法 * 安装包，查看包信息 ```shell # Dependency package npm install npm install -f npm install --force # Dev dependency package npm install --save-dev npm update npm view react npm view 的别名 npm info react npm show react npm v react ``` * Install webpack webpack-cli ```shell # 安装多插件到开发环境依赖 npm install webpack webpack-cli --save-dev # 简写 i = install, 简写 -D = --save-dev, 简写 -S = --save npm i webpack webpack-cli --save-dev npm install webpack webpack-cli -D # dependency npm i webpack --save # global npm i -g webpack ``` * Publish NPM package ```shell # 1. Create your custom package project with package.json; # 2. Export your package in index.js; module.exports = customPackage; # 3. Login, input your NPM account username, password, email npm login # 4. Publish npm publish # 5. Update npm version patch npm version minor npm version major npm publish # 6. 撤销 npm --force unpublish npm-event@1.0.1 ``` * NPM Link: Test packages before publish ```shell # cd yx-node # Go to package directory, such as @daybyday/yx-node # Generate package link npm link # cd blog # Go to your test project which use your package # Add link to project package.json npm link @daybyday/yx-node # You can test it now. # Error: React Hooks Error: Hooks can only be called inside the body of a function component # Solve: 让组件库依赖测试项目的 react，这样就不会存在版本冲突的问题，如下 cd demo/react-components npm link ../test-component-project/node-modules/react # 重新build组件，在测试项目中 npm link 'react-components' （packageName） # unlink npm unlink @daybyday/yx-node ``` * Config ```shell # package version prefix npm config set save-exact true # 最高优先 npm config set save-prefix "~" # 注意双引号 npm config set save-prefix "^" # 注意双引号, 默认值 # 查看安装包的版本与最新版本比较 npm outdate #Package Current Wanted Latest Location #@hot-loader/react-dom 16.13.0 16.14.0 17.0.1 xx #@testing-library/jest-dom 5.11.1 5.11.9 5.11.9 xx #dayjs 1.10.3 1.10.4 1.10.4 xx #enzyme-adapter-react-16 1.15.2 1.15.6 1.15.6 xx #intersection-observer 0.11.0 0.11.0 0.12.0 xx #lodash 4.17.19 4.17.20 4.17.20 xx # 查看 npm 安装路径 npm config get prefix C:\Users\xxxx\AppData\Roaming\npm ``` * 场景示例 ```shell # script 参数 npm build --param1 123 ``` ## 问题列表 * npm ERR! Unexpected end of JSON input while parsing near '....0.0","inherits":"^2.' ```shell npm clean cache --force ``` * [exit status 1: 'C:\Program' is not recognized as an internal or external command](https://github.com/coreybutler/nvm-windows/issues/168) > The problem is with the spaces in URL(C:\Program Files). Try to install the nvm directly in C:/ or in other folder without spaces in the PATH. * 发布 NPM 包版本时： npm ERR! 403 403 Forbidden - PUT \* - \[no\_perms] Private mode enable, only admin can publish this module > registry 配置项被修改为非 npmjs, 需要重新设置为 npmjs ```shell npm config set registry https://registry.npmjs.org ``` * Git set custom registry when group is using cnpm ```shell # Just only set @xx/xxxxxx for your group's components; npm config set "@xx:registry" https://npm.xxxxxx.net.cn:/ # Reset default npm registry npm config set registry https://registry.npmjs.org # Reset Taobao npm registry npm config set registry https://registry.npm.taobao.org/ ``` * npm ERR! code E401 npm ERR! 401 Unauthorized - PUT - \[unauthorized] Login first > 可能是 cnpm 和 npm 设置 registry 的变更导致已登录账号的信息在另外的环境上，暂时是通过修改账号名的方式解决。 [npm ERR! 409 Conflict - PUT https://\[cnpm\]/-/user/org.couchdb.user:\[username\] - \[conflict\] User \[username\] already exists · Issue #1607 · cnpm/cnpmjs.org](https://github.com/cnpm/cnpmjs.org/issues/1607) * npm ERR! cb() never called! ```shell # 删除代理 npm config rm proxy npm config rm https-proxy ``` * TypeError \[ERR\_INVALID\_ARG\_TYPE]: The "path" argument must be of type string. Received undefined > throw new ERR\_INVALID\_ARG\_TYPE(name, 'string', value); ```shell # (C:\Users\xxx\AppData\Roaming\npm\node_modules\nrm\cli.js:17:20) # const NRMRC = path.join(process.env.HOME, '.nrmrc'); const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc'); ``` * npm i -g whistle 后 w2 start 的 error ```shell # 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\w2.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go. # microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 # 所在位置 行:1 字符: 1 ``` ```shell # 1. 以理员身份打开 powershell # 2. 输入 `set-ExecutionPolicy RemoteSigned` # 3. 输入 Y # 4. 重试 w2 start ``` * npm install `gyp ERR! stack Error: EACCES: permission denied, mkdir ...` ```shell # npm 出于安全考虑不支持以 root 用户运行，即使你用 root 用户身份运行了，npm 会自动转成一个叫 nobody 的用户来运行，而这个用户几乎没有任何权限。这样的话如果脚本里有一些需要权限的操作，比如写文件（尤其是写 /root/.node-gyp），就会崩掉。 # 为了避免这种情况，要么按照 npm 的规矩来，专门建一个用于运行 npm 的高权限用户；要么加 --unsafe-perm 参数，这样就不会切换到 nobody 上，运行时是哪个用户就是哪个用户，即使是 root。 npm install --unsafe-perm ``` * could not resolve dependency: npm err! peer react@"^16.8.0 || ^17.0.0" from @xxxx ```shell # 1 npm config set legacy-peer-deps true npm i # 2 npm install --legacy-peer-deps ``` * requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself. ```shell # 手动安装其开发依赖 npm install --save-dev react@^16.8.0 ``` ## NVM: Node version manager ### 镜像设置 在使用nvm安装node的过程中如果速度太慢的话，可以设置改用淘宝的镜像地址 在nvm安装目录下的setting.txt文件中加入以下代码 ```shell node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/ ``` ### 安装 NVM #### Windows > coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go. 1. Uninstall all node; 2. Download and install nvm; (windows: nvm-setup.zip) [nvm-windows](https://github.com/coreybutler/nvm-windows) 3. Check and find usage; #### Mac [macOS 上使用 brew 安装 NVM 管理 node.js](https://qizhanming.com/blog/2020/07/29/how-to-install-node-using-nvm-on-macos-with-brew) ## 参考 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://gyx8899.gitbook.io/blog/docs/npm.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.