正文 

当前位置： 首页 > IT > java教程

npm包的发布和管理(代码片段)

thatme thatme     2023-02-09     737

关键词：

npm包管理

npm其实是Node.js的包管理工具（node package manager）。

为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块C和模块D，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

npm的基础使用

npm的指令其实常用的并不多官方文档；列出来如下面：

  • access
    Set access level on published packages

  • adduser

    ``` Add a registry user account ```

  • audit

    ``` Run a security audit ```

  • bin

    ``` Display npm bin folder ```

  • bugs

    ``` Bugs for a package in a web browser maybe ```

  • build

    ``` Build a package ```

  • bundle

    ``` REMOVED *已删除* ```

  • cache

    ``` Manipulates packages cache ```

  • ci

    ``` Install a project with a clean slate ```

  • completion

    ``` Tab Completion for npm ```

  • config

    ``` Manage the npm configuration files ```

  • dedupe

    ``` Reduce duplication ```

  • deprecate

    ``` Deprecate a version of a package ```

  • dist-tag

    ``` Modify package distribution tags ```

  • docs

    ``` Docs for a package in a web browser maybe ```

  • doctor

    ``` Check your environments ```

  • edit

    ``` Edit an installed package ```

  • explore

    ``` Browse an installed package ```

  • help-search

    ``` Search npm help documentation ```

  • help

    ``` Get help on npm ```

  • hook

    ``` Manage registry hooks ```

  • init

    ``` create a package.json file ```

  • install-ci-test

    ``` Install a project with a clean slate and run tests ```

  • install-test

    ``` Install package(s) and run tests ```

  • install

    ``` Install a package ```

  • link

    ``` Symlink a package folder ```

  • logout

    ``` Log out of the registry ```

  • ls

    ``` List installed packages ```

  • npm

    ``` javascript package manager ```

  • outdated

    ``` Check for outdated packages ```

  • owner

    ``` Manage package owners ```

  • pack

    ``` Create a tarball from a package ```

  • ping

    ``` Ping npm registry ```

  • prefix

    ``` Display prefix ```

  • profile

    ``` Change settings on your registry profile ```

  • prune

    ``` Remove extraneous packages ```

  • publish

    ``` Publish a package ```

  • rebuild

    ``` Rebuild a package ```

  • repo

    ``` Open package repository page in the browser ```

  • restart

    ``` Restart a package ```

  • root

    ``` Display npm root ```

  • run-script

    ``` Run arbitrary package scripts ```

  • search

    ``` Search for packages ```

  • shrinkwrap

    ``` Lock down dependency versions for publication ```

  • star

    ``` Mark your favorite packages ```

  • stars

    ``` View packages marked as favorites ```

  • start

    ``` Start a package ```

  • stop

    ``` Stop a package ```

  • team

    ``` Manage organization teams and team memberships ```

  • test

    ``` Test a package ```

  • token

    ``` Manage your authentication tokens ```

  • uninstall

    ``` Remove a package ```

  • unpublish

    ``` Remove a package from the registry ```

  • update

    ``` Update a package ```

  • version

    ``` Bump a package version ```

  • view

    ``` View registry info ```

  • whoami

    ``` Display npm username ```

init

初始化创建package.json

npm init [--force|-f|--yes|-y|--scope]
npm init <@scope> (same as npx <@scope>/create)
npm init [<@scope>/]<name> (same as npx [<@scope>/]create-<name>)

search

搜索查看远程npm相关资源包信息

npm search [-l|--long] [--json] [--parseable] [--no-description] [search terms ...]
aliases: s, se, find

install

可以是说是install是最为常见的命令官方介绍，

npm install (with no args, in package dir)
npm install [<@scope>/]<name>
npm install [<@scope>/]<name>@<tag>
npm install [<@scope>/]<name>@<version>
npm install [<@scope>/]<name>@<version range>
npm install <git-host>:<git-user>/<repo-name>
npm install <git repo url>
npm install <tarball file>
npm install <tarball url>
npm install <folder>

alias: npm i
common options: [-P|--save-prod|-D|--save-dev|-O|--save-optional] [-E|--save-exact] [-B|--save-bundle] [--no-save] [--dry-run]

In global mode (ie, with -g or --global appended to the command), it installs the current package context (ie, the current working directory) as a global package. The -g or --global argument will cause npm to install the package globally rather than locally.

The -f or --force argument will force npm to fetch remote resources even if a local copy exists on disk.

上面的还介绍已经很详细了，所以这里只是讲一下npm install packageName [|--save |--save-prod|--save-dev]的区别；

  • npm install babel
    npm5以前,会把X包安装到node_modules目录中，不会修改package.json的dependencies字段，之后运行npm install命令时，不会自动安装X
  • npm install babel
    npm5以后,会把X包安装到node_modules目录中，会修改package.json的dependencies字段，之后运行npm install命令时，会自动安装X, 线上环境时会被安装
  • npm install babel -P
    -P, --save-prod: Package will appear in your dependencies. This is the default unless -D or -O are present. Package will appear in your dependencies, With the --production flag (or when the NODE_ENV environment variable is set to production), npm will install modules listed in dependencies.
  • npm install babel -D
    Package will appear in your devDependencies，With the --production flag (or when the NODE_ENV environment variable is set to production), npm will not install modules listed in devDependencies. 会把X包安装到node_modules目录中，会在package.json的devDependencies属性下添加X，之后运行npm install命令时，会自动安装X到node_modules目录中，之后运行npm install –production或者注明NODE_ENV变量值为production时，不会自动安装X到node_modules目录中

update

升级某个资源包或者全部资源包到某一个版本或者匹配的最新版本。

npm update [-g] [<pkg>...]
aliases: up, upgrade

uninstall

移除某个资源包

npm uninstall [<@scope>/]<pkg>[@<version>]... [-S|--save|-D|--save-dev|-O|--save-optional|--no-save]
aliases: remove, rm, r, un, unlink

npm包创建、编写、测试、维护

Node出现之前，JavaScript是缺少包结构的。CommonJS致力于改变这种现状，于是定义了包的结构规范。而NPM的出现则是为了在CommonJS规范的基础上，实现解决包的安装卸载，依赖管理，版本管理等问题。require的查找机制明了之后，我们来看一下包的细节。
一个符合CommonJS规范的包应该是如下这种结构：

  • 一个package.json文件应该存在于包顶级目录下
  • 二进制文件应该包含在bin目录下(可选)
  • JavaScript代码入库是index.js，其他包含在lib目录下
  • 文档应该在doc目录下(可选)
  • 单元测试应该在test目录下(可选)

初始化包

  1. 创建包的根目录

    ``` mkdir testpackage ```

  2. 初始化

    ``` npm init // 需要进行一些基本配置 ```

编写

  1. 创建入口文件

    ``` touch index.js ```

  2. 编写代码

    ``` const updateQueryString = function(url, key, value) let urlParts = url.split(‘#‘), hash = ‘‘, uri = urlParts.shift(), re = new RegExp(`([?&])$key=.*?(&|$)`, ‘i‘), separator = uri.indexOf(‘?‘) !== -1 ? ‘&‘ : ‘?‘, encodeKey = encodeURIComponent(key), encodeValue = encodeURIComponent(value); urlParts.length > 0 && (hash = `#$urlParts.join(‘#‘)`); if (uri.match(re)) return uri.replace(re, `$1$encodeKey=$encodeValue$2`) + hash; else return `$uri$separator$encodeKey=$encodeValue$hash`; ; // 最后的导出部分 module.exports = updateQueryString ; ```

  3. 测试

    1. 创建包的根目录

      ``` npm i mocha -D // 安装测试库 npm i chai -D // 安装断言库 mkdir test cd test touch index.test.js ```

    2. 编写测试代码

      ``` const utils = require(‘./../index.js‘); const expect = require(‘chai‘).expect; let updateQueryString = utils; describe(‘updateQueryString函数的测试‘, function() it(‘https://test.com/path?test=11 修改test参数为22 应该等于 https://test.com/path?test=22‘, function() expect(updateQueryString(‘https://test.com/path?test=11‘, ‘test‘, 22)).to.be.equal(‘https://test.com/path?test=22‘); ); ); ```

    3. 运行测试

      ``` cd .. ./node_modules/mocha/bin/mocha ```

npm包的发布

  1. 注册账号npm官网
  2. 终端执行 npm login,输入用户名和密码 、邮箱
  3. npm publish 发布

Organization包

我们经常可以看到@angular、@ionic他们的包， 都可以以@开头，那么我们的可不可以，原来angular、ionic都属于一个组织（Organization）只有新创建一个Organization组织之后，才能创建@testorg/testpackname这样的包！！！

那么我们就可以去官网上创建我们的Organization，命名之后，官方步骤，

  1. 初始化

    ``` npm init --scope=<your_org_name> ```
    npm init foo -> npx create-foo
    npm init @usr/foo -> npx @usr/create-foo
    npm init @usr -> npx @usr/create
  2. 修改package.json里面的name字段为@your_org_name/<pkg_name>

  3. 发布

    ``` npm publish --access public // 公开包发布 ```

npm包支持esmodule

使用babel来进行一些现代JavaScript的支持，

  1. 创建配置文件

    ``` touch .babelrc ```
  2. 安装先关包

  3. 配置babel

    ``` "presets": [ [ "@babel/preset-env", "targets": "browsers": [ "last 2 versions", "safari >= 7" ], "chrome": 52, "node": "6.10.0" , "modules": "commonjs", "useBuiltIns": "usage" ] ], "plugins": [ "@babel/plugin-syntax-dynamic-import", "@babel/plugin-syntax-import-meta", "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-json-strings", [ "@babel/plugin-proposal-decorators", "legacy": true ], "@babel/plugin-proposal-function-sent", "@babel/plugin-proposal-export-namespace-from", "@babel/plugin-proposal-numeric-separator", "@babel/plugin-proposal-throw-expressions", "@babel/plugin-proposal-export-default-from", "@babel/plugin-proposal-logical-assignment-operators", "@babel/plugin-proposal-optional-chaining", [ "@babel/plugin-proposal-pipeline-operator", "proposal": "minimal" ], "@babel/plugin-proposal-nullish-coalescing-operator", "@babel/plugin-proposal-do-expressions" ] ```

  4. 编译

    ``` ./node_modules/.bin/babel src -d lib ```

最后的测试代码地址test-demo-npm
























npm开发指南从npm包的开发，发布到引用(代码片段)

引言npm（全称NodePackageManager，即“node包管理器”）是Node.js预设的、用JavaScript编写的软体套件管理系统1。而npm提供了一个名为“registry”的查询服务，该服务可以让用户可通过本地的npm命令下载并安装指定模块。... 查看详情

npm离线包的制作和使用(代码片段)

说明常规情况，node安装依赖库使用npminstall命令安装。它会从互联网上的npm中央仓库中下载对应的包文件。但是在有些情况下需要在没有互联网的情况下安装依赖库，比如有些公司中，开发环境无法直接连接互联网,只... 查看详情

关于npm包的发布(代码片段)

...令行输入npmadduser然后登录npmlogin发布npm包，在你要发布的包的目录下,在创建账号后需要认证邮箱，否则无法发布，发布同一个包，每次的版本需要比上一次发布的大，才能发布npmpublish删除npm包npmunpublish--force//强制删除npmunpublish[... 查看详情

npm小结(代码片段)

...npm的背后，是基于couchdb的一个数据库，详细记录了每个包的信息，包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是：将开发者从繁琐的包管理工作（版本、依赖等）中解放出来，更加专注于功能的开发。npm官... 查看详情

npm包的更新说明，你还敢不看吗(代码片段)

npm包的更新说明，你还敢不看吗前言平时工作少不了依赖一些第三方的npm包，站在各位大牛的肩膀上来更好的写bug，此外还可以学习各位大佬们的各种设计思路和优雅实现。不过npm包虽好，但使用之前也要多加甄别，特别是相同... 查看详情

npm开发指南从npm包的开发，发布到引用(代码片段)

...模块分发到registry上面2。综合以上，我们一般说的npm包的开发与发布，指的是通过JS开发npm模块，然后通过npm命令发布至npm模块社区。.开发缘由大屏可视化项目需要用到疫情实时数据，然后疫情实时数据的链接跟... 查看详情

包管理工具yarn的使用和命令总结(代码片段)

...足的地方，提供了新的完善思路，针对如Npm安装包的速度问题，包的版本问题加以改善。所以今天我们要学习的Yarn就是用来解决这些问题的。一.Yarn简介了解前端开发的人可能会习惯于使用npm或者cnpm作为我们项目的... 查看详情

译npx简介：一种npm包的执行器(代码片段)

npx简介：一种npm包的执行器使用本地已安装的可执行工具，而不需要配置npmrun-script执行一次性命令使用不同的node版本运行命令用交互的方式开发npm的run-script跟你的好基友们共享基于gist的脚本！加分环节：shellauto... 查看详情

创建现代npm包的最佳实践(代码片段)

本文首发于微信公众号：大迁世界,我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。更多开源作品请看GitHubhttps://github.com/qq449245884/xiaozhi，包含一线大厂面试完整考点、资料以及我的... 查看详情

创建现代npm包的最佳实践(代码片段)

本文首发于微信公众号：大迁世界,我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。更多开源作品请看GitHubhttps://github.com/qq449245884/xiaozhi，包含一线大厂面试完整考点、资料以及我的... 查看详情

npm查看指定包的所有版本(代码片段)

npm查看指定包的所有版本npm查看指定包的所有版本，以Webpack为例：例如：查看Webpack所有版本npmviewwebpackversions 查看详情

pnpm(代码片段)

...和pnpm等包管理工具，而且pnpm比传统方案（yarn，npm）安装包的速度快了两倍，因此本篇来介绍pnpm官方网站：pnpm下载命令：npminstall-gpnpm【前置是已经下载Nodejs】查看版本：pnpm--versionnpm命令pnpm等价npminstallpnpminstallnpmipnpmaddnpmrunpnpm... 查看详情

node.js模块加载及包的管理(代码片段)

文章目录Node.js模块系统核心模块os模块util模块path模块url模块querystring模块第三方模块Node.js包npm命令nodemon模块nrm模块Gulp模块package.json文件模块加载顺序JavaScript开发弊端：JavaScript在使用时存在两大问题，文件依赖和命名... 查看详情

npm模块管理器入门

...;什么是NPMnpm是Node官方提供的包管理工具，他已经成了Node包的标准发布平台，用于Node包的发布、传播、依赖控制。npm提供了命令行工具，使你可以方便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包。为什... 查看详情

mac下彻底卸载node和npm(代码片段)

...brew安装的直接一条命令 brewuninstallnode官网下载pkg安装包的一条命令 sudorm-rf/usr/local/bin/node,npm,lib/node_module 查看详情

npm版本号的了解(代码片段)

...npmversion的含义每个npm包都有一个package.json，如果要发布包的话，package.json里面的version字段就是决定发包的版本号version字段结构是有三位的版本号,如：0.0.1，对应为major,minor,patch， 也就是说发布大版本的时候会升级为1.0.0，... 查看详情

npm安装同一个包的2个版本(代码片段)

如果我们有个很奇怪的需求，需要安装同一个包的2个版本，我们可以用npmalias来实现npmi<alias>@npm:<packageName>@版本#例子npmiantd3@npm:antd@3npmiantd4@npm:antd@4  查看详情

text用于列出所有全局安装包的npm命令(代码片段)

查看详情