npm包的发布和管理

Posted 2021-01-29 thatme

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