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(`([?&amp;])${key}=.*?(&amp;|$)`, 'i'),
    separator = uri.indexOf('?') !== -1 ? '&amp;' : '?',
    encodeKey = encodeURIComponent(key),
    encodeValue = encodeURIComponent(value); urlParts.length &gt; 0 &amp;&amp; (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=&lt;your_org_name&gt;

    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 &gt;= 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包的发布和管理的更多相关文章

  1. npm 包的 发布 流程

    npm 包的发布流程 本文主要是针对 还未曾发布过自己的 npm 的同学,阐述一下 npm 的发布流程 熟悉的同学,可以绕道了. 首先你得有一个 自己的 npmjs.com 的账号 (没有的话,就到 ...

  2. 如何开发一个npm包并发布

    一.安装nodejs 不多说了,网上教程多得是 二.创建自己的npm包 目录结构 npm-test a.js b.js package.json 开发 为了简单便于理解,就开发一个简单地hello程序 ...

  3. Github 持续化集成 工作流 Npm包自动化发布

    Github 持续化集成 工作流 Npm包自动化发布 简介   持续集成指的是,频繁地(一天多次)将代码集成到主干. 它的好处主要有两个: 快速发现错误.每完成一点更新,就集成到主干,可以快速发现错误 ...

  4. 如何开发一个npm包并发布到npm中央仓库

    转自: https://liaolongdong.com/2019/01/24/publish-public-npm.html 如何开发一个npm包并发布到npm中央仓库需求背景:平时在项目工作中可能 ...

  5. 关于npm 包的发布

    注册一个npm 账号,打开命令行输入 npm add user 然后登录 npm login 发布npm 包,在你要发布的包的目录下,在创建账号后需要认证邮箱,否则无法发布,发布同一个包,每次的版本需 ...

  6. npm包的发布

    假设该待发布包在你本地的项目为 project1 包的本地安装测试 在发布之前往往希望在本地进行安装测试.那么需要一个其他的项目来本地安装待发布项目. 假设该其他项目为project2.假设proje ...

  7. 从0开始用webpack开发antd,react组件库npm包并发布

    一.初始化一个npm包 1.新建一个文件夹(名称随意,建议和报名一致),输入命令 :npm init -y 会自动生成一个包的说明文件 package.json如下(本文以scroll-antd-ta ...

  8. npm包实现发布正式和测试版

    npm publish的時候 怎麽發測試版和正式版本呢? 通常我們一般情況下 直接 npm publish 提交自己的開發包后,在項目中 npm install @packageName 是下載下來剛 ...

  9. 创建并发布npm包

    1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm np ...

随机推荐

  1. SAP ABAP RFC接口通用日志工具:abap fm logger

    很早之前就想写个能记录函数模块日志的通用工具,最早尝试时,没有想清楚插入代码的体积问题.在一些群友的提醒下,了解到可以用宏来处理这一问题.不过当时比较忙,就没有动笔.最近又想起这件事,花了2天完成了一 ...

  2. Redis秒杀系统架构设计-微信抢红包

    导读 前二天我写了一篇,Redis高级项目实战(点我直达),SpringBoot整合Redis附源码(点我直达),今天我们来做一下Redis秒杀系统的设计.当然啦,Redis基础知识还不过关的,先去加 ...

  3. Python开发的入门教程(五)-set

    介绍 本文主要介绍Python中set的基本知识和使用. Python中什么是set dict的作用是建立一组 key 和一组 value 的映射关系,dict的key是不能重复的. 有的时候,我们只 ...

  4. (几乎)完美实现 el-table 列宽自适应

    背景 Element UI 是 PC 端比较流行的 Vue.js UI 框架,它的组件库基本能满足大部分常见的业务需求.但有时候会有一些定制性比较高的需求,组件本身可能没办法满足.最近在项目里就碰到了 ...

  5. 面试中的这些点,你get了吗?

    一.前言 因为疫情的原因,小农从七月份开始找工作,到现在已经工作了一个多月了,刚开始找工作的时候,小农也担心出去面试技能不够,要懂的东西很多,自己也准备可能会面试一段时间,从找工作到入职花了十几天,总 ...

  6. Unity3D中可重载虚函数的总结

    重载虚函数:Unity3D中所有控制脚本的基类MonoBehaviour有一些虚函数用于绘制中事件的回调,也可以直接理解为事件函数,例如大家都很清楚的Start,Update等函数,以下做个总结. A ...

  7. 【web系统UI自动化】关于UI自动化的总结

    实施过了web系统的UI自动化,回顾梳理下,想到什么写什么,随时补充. 首先,自动化测试不是手动测试的替代品,是比较好的补充,而且不是占大比重的补充. 70%的测试工作集中在底层接口测试和单元测试,2 ...

  8. Python の 在 VSCode 中使用 IPython Kernel 的方法

    本文介绍,在 VSCode 使用 IPython Kernel,的设置方法. 要达到的效果: 只需按下 Ctrl+:,选中的几行代码,就会自动发送到 IPython Kernel,并运行,得到结果!当 ...

  9. GuestOS? HostOS?

    起因 今天在网上看到一篇文章  有几个陌生的关键词不太熟悉,就随笔记一下. 名词解释 # OS :操作系统 # VM(虚拟机)    里的OS 称为        GuestOS # 物理机      ...

  10. leetcode刷题-50Pow(x, n)

    题目 实现 pow(x, n) ,即计算 x 的 n 次幂函数. 思路 最初的想法n>0计算res = res*x 计算n次,n<0,将x取倒数后同理,但结果表明计算速度太慢了. 后续应该 ...