其他分享
首页 > 其他分享> > npm相关知识整理

npm相关知识整理

作者：互联网

语义化版本

依赖版本号

package入口

如果使用import对库进行导入，会优先寻找module字段引入，然后才是main字段。

{
  name: 'midash',
  main: './dist/index.js', // es module入口
  module: './dist/index.mjs' // commonjs入口
}

package-lock

锁定规则

要不要提交package-lock

npm脚本原理

npm脚本执行

{
  "scripts": {
    "bx": "npm run script1.js & npm run script2.js", // 并行执行（同时执行）
    "abc": "npm run script1.js && npm run script2.js", // 继发执行（即只有前一个任务成功，才执行下一个任务）
  }
}

Windows下不支持这2种方式，可以通过安装npm-run-all、Concurrently模块解决。

npm常用别名

npm add -> npm install
npm create -> npm init

npm发布

  1. 第一步，在npm官网进行注册一个账号。
  2. 第二步，执行 npm login，输入注册的账号密码完成登录。
  3. 第三步，npm i -y 初始化 package 文件，填入最基本的3个字段：name，version 和 main 字段，其中main字段应该是打包后的代码。
  4. 第四步，在包目录执行npm publish

npm变量

通过npm_package_前缀，js脚本可以通过process.env对象拿到package.json里面的字段。比如，下面这个package.json：

{
  "name": "foo", 
  "version": "1.2.5",
  "scripts": {
    "view": "node view.js"
  }
}

// view.js
console.log(process.env.npm_package_name); // foo
console.log(process.env.npm_package_version); // 1.2.5

npm_package_前缀也支持嵌套的package.json字段

// view.js
console.log(process.env.npm_package_scripts_view); // node view.js

npm依赖

安装命令

npm i --save xxx // 生产依赖
npm i --save-dev // 开发依赖

npm i -S xxx // 生产依赖（简写）
npm i -D xxx // 开发依赖（简写）

是否要严格区分生产和开发？

npm钩子

npm钩子，也称npm生命周期。npm默认提供pre和post两个钩子，当我们执行任意npm run脚本时，都将自动触发pre/post的钩子但是这2个钩子的内容需要由你自定义。

{
  "scripts": {
    "preabc": "xxx",
    "abc": "xxx",
    "postabc": "xxx"
  }
}

当你执行npm run abc时，会自动按照下面的顺序执行

npm run preabc -> npm run abc -> npm run postabc

一些常用npm脚本，如：publish、install、uninstall、version、test、stop、start和restart，同样支持自定义这2个钩子。

npm restart

npm restart是一个复合命令，实际上会执行三个脚本命令：stop、restart、start。具体的执行顺序如下：

prerestart
prestop
stop
poststop
restart
prestart
start
poststart
postrestart

npm publish

npm publish发包的生命周期比较复杂，当执行npm publish命令，将自动执行以下脚本：

prepublishOnly: 最重要的一个生命周期，如果你需要在发包之前自动做一些事情，如测试、构建等，可以在这里完成。
prepack
prepare
postpack
publish
postpublish

prepare钩子

一个最常用的生命周期钩子，它的执行时机：

常用的git hook工具husky通常就被放置在这个钩子里执行

{
  prepare: "husky install";
}

npm_lifecycle_event变量

npm提供一个npm_lifecycle_event变量，返回当前正在运行的脚本名称，比如pretest、test、posttest等等。所以，可以利用这个变量，在同一个脚本文件里面，为不同的npm scripts命令编写代码。

const TARGET = process.env.npm_lifecycle_event;

if (TARGET === 'test') {
  console.log(`Running the test task!`);
}

if (TARGET === 'pretest') {
  console.log(`Running the pretest task!`);
}

if (TARGET === 'posttest') {
  console.log(`Running the posttest task!`);
}

npx

npm 从5.2版开始，增加了npx命令，可以提升开发者使用包内提供的命令行工具的体验，它有很多用处。

方便调用项目安装的模块

通常我们安装完npm依赖或脚手架后，需要将其写入package.json的scripts字段里面，运行npm run xxx才能执行，npx就是想解决这个问题，利用npx，我们可以直接调用运行。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-bundle": "vue-cli-service build --target lib --name t3-ui ./src/components/index.js",
    "lint": "vue-cli-service lint"
}

我们用npx命令的话， 就不需要在写scripts里面的内容， 直接在控制台执行npx vue-cli-service serve，就会直接寻找本地依赖并执行。

避免全局安装模块

运行npx命令后，npx会将依赖下载到一个临时目录，使用以后再删除

npx uglify-js@3.1.0 main.js -o ./dist/main.js // 临时下载压缩包，执行压缩

npx http-server // 临时在当前目录，安装并运行起本地服务器

使用不同版本的node

npx -p node@6 npm run serve

执行逻辑如下：

npx命令执行逻辑

先自动查找当前依赖包中的可执行文件，如果找不到，就会去PATH里找，如果依然找不到，就会帮你临时安装，执行完后再删除包。

npm init

命令用法：

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>`)

npm init xxx时，会自动转换成如下npx命令：

npm init foo -> npx create-foo
npm init @usr/foo -> npx @usr/create-foo
npm init @usr -> npx @usr/create

以vue3官方安装为例，命令实际效果如下：

// 实际安装的是create-vue@latest包
npm init vue@latest -> npx create-vue@latest

npm exec命令和npx作用相同，区别仅在于后者会将其后面的标志和选项都会优先设置为位置参数，具体可对照npm文档。

简而言之，就是可以将你本地的npm开发包当作是已经npm install好后的包使用了，用来在本地项目和本地npm模块之间建立连接，方便关联到项目中进行修改/调试。

项目和本地npm模块在同一个目录下，可以使用相对路径进行link

npm link ../module   // 然后，你本地项目的node_modules就出现了该module的软链接

1.注入全局link

cd modulePath
npm link // 然后，全局node_modules目录下就出现该module的软链接

2.引入全局link

cd projectPath
npm link module

解除局部link

cd projectPath
npm unlink module

解除全局link

cd modulePath
npm unlink

以vite为例

如果你迫不及待想要体验最新的功能，可以自行克隆vite仓库，然后到本地机器上然后自行将其链接

// 第1步，克隆并进入目录
git clone https://github.com/vitejs/vite.git
cd vite

// 第2步，安装vite作为npm开发包的依赖，然后打包出开发者需要的vite
pnpm install
cd packages/vite
npm run build

// 第3步，全局注入link
npm link

// 第4步，进入本地项目，引入link，这个时候就相当于全局安装了vite，类似于执行了vite官方安装命令：npm create vite@latest
pnpm link --global vite

// 第5步，package文件的script内dev写入vite命令
dev: 'vite'

// 第6步，执行npm命令
npm run dev

实际测试发现，使用link后，第5和第6步是多余的，本地可以直接在控制台使用vite命令，不管你是全局link的，还是局部link的，都可以运行。

参考文章

标签：npm,依赖,run,package,知识,link,npx,整理
来源： https://www.cnblogs.com/kanyu/p/16457653.html