Skip to content

npm有个命令突破我知识认知了 #34

@maicFir

Description

@maicFir

npm是一个包管理工具,当我们安装nodejs时,这个命令会默认安装。你可能非常熟悉npm run xxx这个命令,每次上线前你都在执行npm run build,甚至你常常在npm i的等待中摸鱼。

当某一天你的同事在你电脑输入了一行命令...,npm view typescript versions,你脑壳里想着,这

于是乎,你去官方文档查了下这个命令,原来npm view xx versions是查询 xx 包所有可用版本。为了不拘泥于npm run startnpm run build这两行命令,于是笔者总结了这篇没有深度,但是很广度的npm命令大全,希望你能在你实际项目中能用得上。

正文开始...

npm init

::: details code

npm init
// or npm init -y

:::

该命令意思是初始化一个包项目,生成一个package.json文件

可以一直enter键下去,你也可以按你心情在控制台输入一些信息,然后enter下去
later...

最后在你目录下生成了一个package.json文件
::: details code

{
  "name": "npm-know",
  "version": "1.0.0",
  "description": "My first encounter with npm",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "npm"
  ],
  "author": "Maic",
  "license": "ISC", // 以上都是默认的配置
}

:::

另外如果你想在指定的目录中生成package.json,那么你你只需执行下面一行命令
npm init -w 01, 01是你当前已存在的目录,如果01不存在,则会在你得根目录.Trash中创建一个01/package.json


关于package.json的一些解释

::: details code

// name  包名,如果你需要发布一个npm包,那么这是必须的
// version 版本 同上,你需要发布一个包,那么版本是必须的 包名+版本构成一个包的唯一标识
// description 包名的描述,npm能根据这个描述检索你得包名
// main 程序的主要入口,默认index.js
// scripts 可以执行npm 指定运行的别名
// keywords 关键字,便于别人搜索关联找到你发布的包名
// author 发布该包的作者名
// license 许可证 通常是ISC或者MIT,便于开发者知道这是个开源可免费试用的包

:::

关于package.json的默认的配置就是这么多,接下来,你感兴趣的来了,她来了,她就是
bin...

::: details code

{
  ...,
  license: 'ISC',
   "bin": {
     "maic-app-cli": "./cli.js"
   }
}

:::

在官方解释这个bin有点绕,我的理解的就是,提供一个可执行的接口命令,让你可以运行你写的包,能关联到当前的项目,不管是全局还是局部安装,npm可以通过这个bin的别名命令,执行指定包内的脚本,从而进行一系列的初始化工作。比如大名鼎鼎的vue-clicreate-react-app脚手架,当你看到[email protected]版本package.json时,可以看到vue命令的操作

::: details code

{
  "name": "vue-cli",
  "version": "2.9.6",
  "description": "A simple CLI for scaffolding Vue.js projects.",
  "preferGlobal": true,
  "bin": {
    "vue": "bin/vue",
    "vue-init": "bin/vue-init",
    "vue-list": "bin/vue-list"
  },
  ...
}

:::

前往bin/vue目录你可以看到

::: details code

#!/usr/bin/env node
const program = require('commander');
program
  .version(require('../package').version)
  .usage('<command> [options]')
  .command('init', 'generate a new project from a template')
  .command('list', 'list available official templates')
  .command('build', 'prototype a new project')
  .command('create', '(for v3 warning only)');

program.parse(process.argv);

:::

这里就是熟悉的脚手架vue create xx,vue init的一些 xxx项目的脚手架工作了,具体可以查看vue-cli 源码

关于bin的实际操作,后续会专门写一个自己的脚手架,再来细细了解下这些知识。

conig,这个配置可以在你指定包名,版本升级时,一些特殊值可以保持不变。

dependencies这是一个开发依赖,当你在你得cmd控制台输入npm i ramda -s

package.jsondependencies生成了一个依赖文件"ramda": "^0.27.1"

devDependencies是一个在生产环境需要依赖的包,dependenciesdevDependencies的区别是:npm i xx -snpm i xx --save-dev,在实际项目开发中,你可以把dependencies安装的开发环境依赖包,在你打包的时候利用webpackexternals外部扩展特性分离出去,也就是将开发环境的包可以用cdn加载,这样减少你生产环境的bundle.js的体积,开发环境那部分依赖的包就可以单独cdn引入,进而提升你项目的打包速度。

打开node_modules/ramda,我们能从这个优秀的ramda包中发现些什么,
注意scripts

scripts配置中有一个"build": "npm run build:es && npm run build:cjs && npm run build:umd && npm run build:umd:min && npm run build:mjs",ramda
是用rollup打包的,这行命令可以将你的ramda打包成了不同模式,支持按需引入还是script标签引用的多种方式。关于rollup打包,可以参考官网学习rollup.js

现在我们测试下自己配置的scripts,当前目录下新建一个文件index.js,并控制台运行npm run start
::: details code

  {
  "name": "npm-know",
  "version": "1.0.0",
  "description": "My first encounter with npm",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  ...
}

:::

index.js写入测试代码
::: details code

// 由于刚项目已经安装ramda,所以直接require该包
const R = require('ramda');
const cityMap = [
  {
    city: '北京'
  },
  {
    city: '上海'
  },
  {
    city: '深圳'
  }
];
// 找到上海
const shanghaiCity = R.find(R.propEq('city', '上海'))(cityMap);
console.log(shanghaiCity);

:::

测试结果如下:

在你执行npm run start时,它与npm start也是等价的,实际上当我们执行这行命令时本质上在执行node index.js,前者相当于就是一个命令的别名,所以你看到ramdascripts上配置了多行命令,"build": "npm run build:es && npm run build:cjs && npm run build:umd && npm run build:umd:min && npm run build:mjs",,在ramda中,这行命令执行了多行配置

npm init生成的package.json内部还有其他的字段,更多可以参考官方文档pckage.json,你已经了解npm最硬核的一些知识了,其他的,你就熟悉下些配置时,比如支持操作系统、node 指定环境版本等等,巴拉巴拉...

npm -h

::: details code

npm - h;

:::

这是一个查看npmcmmand 有那些指令,等价于npm help,如果你记不起 npm 有哪些命令,那么你可以用这个查看她的全家桶

npm i(npm install 的简写)

::: details code

npm i
// npm i -g 全局安装
// npm i xx@latest 安装最新xx版本的包
// npm i [email protected] 安装指定版本的包
// npm i [email protected] -s or npm i [email protected] -d 安装到开发环境,包名会在dependencies
// npm i [email protected] --save-dev 安装到生产环境,包名会在devDependencies

:::

如果你package.jsondependencies或者devDependencies有对应的包了,那么你执行该命令后,会在你当前项目中生成一个node_modules文件夹,该文件下会下载你需要的包,应有尽有。

npm cache clear

::: details code

npm cache clear

:::

清除缓存包,在你运行项目,莫名其妙的报错的时候,除了删除node_modules,有时候你执行这个命令,可能能帮助到你

npm bugs xxx

::: details code

npm bugs ramda

:::

这是一个很有用的命令,快速链接到你这个包的issue,在issue中会找到你遇到的一些问题,例如:cd node_modules/ramda,执行命令npm bugs,浏览器自动给你打开了该包issue地址。(如果只是在你自己的项目根目录里,执行这个命令,这个命令会把以当前package.json的 name,在 npm 官网当成一个路由地址打开,那么就是 404 了,不信你可以试试)。

npm view ramda versions

查看 ramda 所有版本包
::: details code

npm view ramda versions
// npm view ramda version  查看当前项目ramda版本
// npm view ramda@* 查看当前包的基本信息

:::

如果你本地想安装一个vue指定的版本,那么你可以先npm view vue versions 查到所有的版本,然后命令安装npm i [email protected] -s那么就会安装该版本。就是这么简单,这个命令用起来,你终于不用去官网看版本了。

npm diff [email protected] [email protected]

::: details code

npm diff --diff=ramda@0.0.1 --diff=ramda@0.1.0

:::

比较两个版本的不同,用到少。

npm docs ramda

::: details code

npm docs ramda

:::

这个命令打开ramda的官方文档,就是package.json里面的那个homepage地址

npm update xxx

更新 xxx 包

::: details code

npm update ramda // 更新ramda包

:::

npm uninstall xxx

卸载 xxx 包
::: details code

npm uninstall ramda
// 简写,等价于下面  npm un ramda or npm rm ramda or npm r ramda

:::

npm pkg get xx1 xx2

::: details code

npm pkg get name version

:::
读取包名、版本等信息


接下来说几个关于npm发包的几个关键命令

npm login

::: details code

npm login

:::

这中途需要npm官方会给你发个邮箱的验证码,收到npm注册的邮箱,输入就 OK 了,这里以笔者 n 年前上传的一个包eazyutils包为例。

npm publish

::: details code

npm publish

:::

(注意修改下package.json的版本),否则提交不上

更多npm命令参考npm commands了,不常用的就没写了,因为那些不常用的,笔者也没用过,哈哈。更多关于npm的命令最好就是找官方文档查询,本来以为你看到这里,以为已经总结了所有npm命令,但是....,笔者文章已经覆盖了项目里所用到的绝大部分场景。

总结

1.npm 常用的command命令,譬如高频命令npm view xxx versions,npm update@lastestnpm un xxxnpm i xx -s,常用的增删查改基本以及涵盖了。

2.了解package.json关键的几个字断意思,但是bin这个你必须要知道,因为她,你可以任性创建一个自己的xx-cli

3.npm如何发布一个全世界都能看到,全世界都能下载的npm包,以 n 年前的一个简单eazyutils包为例

4.code example

最后,喜欢的点个赞,在看,收藏等于学会,我会以循序渐进的方式一直分享下去。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions