search

maicFir / lessonNote

JS学习笔记
33 stars 11 forks source link

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

Open maicFir opened 2 years ago

maicFir commented 2 years ago

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

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

于是乎，你去官方文档查了下这个命令，原来npm view xx versions是查询 xx 包所有可用版本。为了不拘泥于npm run start与npm 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-cli和create-react-app脚手架,当你看到vue-cli@2.96版本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.json中dependencies生成了一个依赖文件"ramda": "^0.27.1"。

devDependencies是一个在生产环境需要依赖的包，dependencies与devDependencies的区别是:npm i xx -s和npm i xx --save-dev,在实际项目开发中，你可以把dependencies安装的开发环境依赖包，在你打包的时候利用webpack的externals外部扩展特性分离出去，也就是将开发环境的包可以用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,前者相当于就是一个命令的别名，所以你看到ramda的scripts上配置了多行命令，"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 xx@1.x.x 安装指定版本的包
// npm i xx@1.x.x -s or npm i xx@1.x.x -d 安装到开发环境，包名会在dependencies
// npm i xx@1.x.x --save-dev 安装到生产环境，包名会在devDependencies

:::

如果你package.json的dependencies或者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 vue@3.2.25 -s那么就会安装该版本。就是这么简单，这个命令用起来，你终于不用去官网看版本了。

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

::: 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@lastest、npm un xxx、npm i xx -s,常用的增删查改基本以及涵盖了。

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

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

4.code example

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