起风了

Appearance

包管理工具 ​

JavaScript管理第三方包的工具有 npm、 yarn、 cnpm、 npx、 pnpm, 目前常用的有 npm 和 pnpm 和 yarn。

npm ​

Node Package Manager 也就是Node包管理器，npm 属于node的一个管理工具，需要先安装node，安装node的过程会自动安装npm工具。现在在前端项目中也使用它来管理依赖的包。

点击查看npm官网，可以在官网上发布自己的包，使用npm install xxx安装包时是从registry上面下载的包。使用npm进行安装会在当前目录下生成一个 node_modules 文件夹，安装好的依赖包在 node_modules 文件夹下。一些常用的npm命令:

javascript
npm install  // 根据项目中的package.json文件安装依赖包

npm init  // 初始化package.json文件
npm i webpack // install的简化
npm install webpack -g  // 全局安装
npm install webpack  // 运行时依赖 等同于 npm install electron -S
npm install webpack --save-dev // 开发依赖 等同于 npm install webpack -D (只有开发时才使用)

npm uninstall package  // 卸载依赖包

npm rebuild // 强制重新build
npm cache clean // 清除缓存

npm config get registry  // 查看镜像
npm config set registry https://registry.npm.taobao.org // 设置npm镜像

npm install的区别 ​

  • npm install electron -g：这会将 Electron 安装为全局模块。
  • npm install electron：这是一个简写形式，等同于 npm install electron -S。它将 Electron 安装为项目的 运行时依赖。
  • npm install electron -S：这会将 Electron 安装为项目的 运行时依赖。模块将被添加到 package.json 文件的 dependencies 节点中。如果你的应用程序在运行时需要 Electron，请使用这个命令。
  • npm install electron -D：这会将 Electron 安装为项目的 开发时依赖。模块将被添加到 package.json 文件的 devDependencies 节点中。如果你只在开发过程中需要 Electron，请使用这个命令。
  • npm install electron --save-dev：这也是一个简写形式，等同于 npm install electron -D。它将 Electron 安装为项目的 开发时依赖。

npm登录到官网可以使用以下命令 ​

javascript
npm login // 登录 会跳转到网页
npm whoami // 查看用户登录信息
npm publish // 发布到npm registry上
npm unpublish // 删除发布的包
npm deprecate // 让发布的包过期

使用npm全局安装，使用时找不到对应的包 ​

javascript
npm root -g // 查看全局包安装路径
npm install puppeteer -g // 全局安装puppeteer
which puppeteer // 查看安装的路径
npm config get prefix // 查看npm安装的包路径
npm ls -g // 查看全局安装的包
npm ls -g --depth 0 // 查看包的依赖关系

如果是项目中,使用以下命令查看已安装的依赖包

javascript
npm ls // 当前项目已安装的包
npm ls --depth 0 --prod // 查看生产环境依赖的包
npm ls --depth 0 --dev // 查看开发环境依赖的包

全局安装的意思是将工具安装到电脑中，并且将命令添加到变量中，通过命令行可以直接使用该命令。通常使用npm全局安装的包都是一些工具包 yarn webpack 等,全局安装并不能让我们在所有的项目中使用 axios 等库。

package.json 配置文件 ​

创建package.json文件可以使用 npm init 或者 npm init -y。使用 npm init 创建时需要填写信息，使用npm init -y 所有信息使用默认的。文件的配置项介绍:

markdown
private: 记录当前的项目是否是私有的,当值为true时，npm是不能发布它的
main: 设置程序的入口，比如`axios`对应的main属性是`index.js`
scripts: 用于配置一些脚本命令，以键值对的形式存在，配置后可以通过 `npm run` 命令的key来执行这个命令；
dependencies: 指定无论开发环境还是生成环境都需要依赖的包，比如 vue、vuex、vue-router
devDependencies: 生成环境是不需要的包，比如webpack、babel等，通过 `npm install webpack --save-dev`，将它安装到devDependencies属性中
peerDependencies: 依赖关系是对等依赖，也就是你依赖的A,A依赖B
engines: 用于指定Node和NPM的版本号
browserslist: 配置打包后的JavaScript浏览器的兼容情况,是为webpack等打包工具服务的一个属性

scripts用于配置一些脚本命令，以键值对的形式存在，配置后可以通过 npm run start 命令的key来执行这个命令,对于常用的 start、 test、stop、restart可以省略掉run直接通过 npm start等方式运行。

javascript
 "scripts": {
    "start": "node main.js"
  }

dependencies属性依赖版本中^和~的区别：

  1. x.y.z：表示一个明确的版本号；
  2. ^x.y.z：表示x是保持不变的，y和z永远安装最新的版本；
  3. ~x.y.z：表示x和y保持不变的，z永远安装最新的版本；

package-lock.json 介绍 ​

npm install会检测是有package-lock.json文件,没有lock文件，从registry仓库直接下载，有lock文件，检测lock中包的版本是否和package.json中一致，不一致，那么会重新构建依赖关系，直接会走顶层的流程。

markdown
name：项目的名称；
version：项目的版本；
lockfileVersion：lock文件的版本；
requires：使用requires来跟踪模块的依赖关系；
dependencies：项目的依赖
当前项目依赖axios，但是axios依赖follow-redireacts；
axios中的属性如下：
✓ version表示实际安装的axios的版本；
✓ resolved用来记录下载的地址，registry仓库中的位置；
✓ requires/dependencies记录当前模块的依赖；
✓ integrity用来从缓存中获取索引，再通过索引去获取压缩包文件；

npx ​

npx是npm5.2之后自带的一个命令,比较常见的是使用它来调用项目中的某个模块的指令,比如

全局安装的是 webpack5.1.3 项目安装的是 webpack3.6.0

在命令行中使用的webpack --version显示的是5.1.3版本。如果要使用项目(局部的)webpack

  1. 在项目根目录下使用命令
shell
./node_modules/.bin/webpack --version
  1. 修改package.json中的scripts
javascript
"scripts": {
    "webpack": "webpack --version"
}
  1. 使用npx,在项目根目录下使用命令
shell
npx webpack --version

npx命令会优先在当前目录下寻找node_modules文件夹

pnpm ​

当使用 npm 或 Yarn 时，如果你有 100 个项目，并且所有项目都有一个相同的依赖包，那么， 你在硬盘上就需要保存 100 份该相同依赖包的副本。

如果是使用 pnpm，依赖包将被 存放在一个统一的位置，因此：

  1. 如果你对同一依赖包使用相同的版本，那么磁盘上只有这个依赖包的一份文件；
  2. 如果你对同一依赖包需要使用不同的版本，则仅有 版本之间不同的文件会被存储起来；
  3. 所有文件都保存在硬盘上的统一的位置：
    1. 当安装软件包时， 其包含的所有文件都会硬链接到此位置，而不会占用 额外的硬盘空间；
    2. 这让你可以在项目之间方便地共享相同版本的 依赖包；

pnpm官网,常见指令

javascript
npm install pnpm -g  // npm安装pnpm

pnpm install  // 安装
pnpm add <pkg>  // 安装包
pnpm remove <pkg>  // 卸载包

pnpm <cmd> // 运行命令

pnpm store path // 获取当前活跃的store目录
pnpm store prune  // 从store中删除当前未被引用的包来释放store的空间

pnpm存储在电脑的路径：

  • 在 Linux 上，默认是 ~/.local/share/pnpm/store
  • 在 Windows 上： %LOCALAPPDATA%/pnpm/store
  • 在 macOS 上： ~/Library/pnpm/store

Webpack ​

Webpack 是一个打包工具，将vue、sass、hbs、js文件打包成浏览器识别的 js 、css文件。Webpack的运行是依赖Node环境的。Webpack官网

webpack的安装目前分为两个：webpack、webpack-cli

shell
npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装

默认打包 ​

我们可以通过webpack进行打包，之后运行打包之后的代码。在目录下直接执行 webpack 命令，生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包之后的文件。

当我们运行webpack时，webpack会查找当前目录下的 src/index.js作为入口,如果当前项目中没有存在src/index.js文件会报错。

我们也可以通过配置来指定入口和出口,当前指定了main.js为入口, build文件为输出文件夹

shell
npx webpack --entry ./src/main.js --output-path ./build

项目中使用webpack可以查考以下的步骤

shell
npm init #创建package.json文件，用于管理项目的信息、库依赖等
npm install webpack webpack-cli -D  #安装局部的webpack

npx webpack #使用局部webpack打包 或者编辑package.json文件

"scripts": {
    "build": "webpack"
}
npm run build # 运行webpack

Webpack配置文件 ​

在通常情况下，webpack需要打包的项目是非常复杂的，我们可以通过配置文件满足要求。在根目录下创建一个webpack.config.js文件(名称是固定的)来作为webpack的配置文件：

javascript
const path = require('path')

module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname,"./build")
    }
}

如果配置文件并不是webpack.config.js的名字，需要通过 --config 来指定对应的配置文件

shell
webpack --config wk.config.js #指定webpack配置文件
本站已安全运行
Copyright © 2020 - 至今
Mr.Panda