0030【NPM】简单构建项目、安装命令_lzma library error: no progress is possible-CSDN博客

本文链接：https://blog.csdn.net/chenzhong2010/article/details/123774771

注：本笔记内容部分来自于https://www.bilibili.com/video/BV1Dv411W7XP?spm_id_from=333.999.0.0

一 npm与node.js安装-版本关系

1.1 安装node.js

去官网下载安装包进行安装node.js，安装好后，也安装到npm了。

mac版安装目录：/usr/local/n/versions/node

1.2 升级node.js

管理板块n的命令有很多。windows系统没办法使用 n 来更新 nodejs 版本，要更新 nodejs 的话，重新下载 nodejs，覆盖安装即可。

以下是Mac版本

1.2.1 安装稳定版本

# 本来用(sudo npm install Node.js -g)更新最新版本的，但是不管执行多少次，版本还是不变（v14.6.0），于是用下面命令来更新node.js

# 全局安装npm最新版本，任何位置可使用（不带版本号）
#npm install npm -g      # 如果权限不够，则加入sudo，并输入密码。
#sudo npm install npm -g

#第一步：先清除npm缓存
$ npm cache clean -f
#第二步：安装n模块(n模块专门用来管理nodejs的版本)
# n工具是mac和Linux可用的node版本管理工具(Nodist、nvmw是针对windows的node版本管理工具)
#npm install -g n
$ sudo npm install -g n -force
#第三步：升级node.js到最新稳定版(当前node-v16.14.2，但是最新版本是Node.js 17.8.0)
$ sudo n stable

installing : node-v16.14.2
       mkdir : /usr/local/n/versions/node/16.14.2
       fetch : https://nodejs.org/dist/v16.14.2/node-v16.14.2-darwin-x64.tar.xz
############################################################################################           91.6%
curl: (92) HTTP/2 stream 0 was not closed cleanly: INTERNAL_ERROR (err 2)
bin/node: Lzma library error:  No progress is possible
tar: Error exit delayed from previous errors.

  Error: failed to download archive for 16.14.2

# 上面安装失败后，重新安装，安装完成后，npm也跟着一起更新版本
$ sudo n stable
installing : node-v16.14.2
       mkdir : /usr/local/n/versions/node/16.14.2
       fetch : https://nodejs.org/dist/v16.14.2/node-v16.14.2-darwin-x64.tar.xz
   installed : v16.14.2 (with npm 8.5.0)

1.2.2 安装最新版本

# 或者安装最新版本
$ sudo n latest
installing : node-v17.8.0
       mkdir : /usr/local/n/versions/node/17.8.0
       fetch : https://nodejs.org/dist/v17.8.0/node-v17.8.0-darwin-x64.tar.xz

1.3 全局安装

# 带上 -g
$ sudo npm install -g jquery

1.3 安装最新版本

# 不带版本号
$ sudo npm install -g jquery

1.4 局部安装

# 不带-g，进入项目所在文件夹后
$ mkdir demo
$ cd demo
$ sudo npm install jquery
$ ll

node_modules/
package-lock.json
package.json

1.5 指定版本安装

# @后带上版本号
$ sudo npm install -g jquery@3.6.0
$ sudo npm install jquery@3.6.0

1.6 查看全局安装

$ npm list -g --depth 0
$ npm list -g
/usr/local/lib
├── @angular/cli@11.0.4
├── @vue/cli@4.5.8
├── babel-cli@6.26.0
├── cnpm@7.0.0
├── corepack@0.10.0
├── grunt-cli@1.4.3
├── grunt@1.4.1
├── gulp@4.0.2
├── n@8.1.0
├── node.js@0.0.1-security
├── npm@8.5.5
├── typescript@4.1.3
├── webpack-cli@4.1.0
├── webpack@5.1.3
└── yarm@0.4.0

# 或者这样查看
$ npm root -g
/usr/local/lib/node_modules

1.7 查看局部安装

$ npm list --depth 0

chyzhong@ /Users/chyzhong
└── jquery@3.6.0

$ npm root

1.8 更新包

$ npm update -g xxx
$ npm update xxx

1.9 删除包

$ npm uninstall -g xxx
$ npm uninstall jquery

removed 1 package, and audited 1 package in 270ms
found 0 vulnerabilities

# 再查
npm list --depth 0
/Users/chyzhong
└── (empty)

1.10 查看某个模块的版本

$ npm list npm
demo01@ /Users/chyzhong/temp/demo01
└── (empty)

$ npm list npm -g
/usr/local/lib
├─┬ cnpm@7.0.0
│ └── npm@6.14.13
└── npm@8.5.5

1.11 帮助命令

$ npm help install

1.12 清除缓存

$ npm cache clean -f

1.13 撤销发布某版本代码

npm unpublish package@version

二配置npm镜像

2.1 配置npm镜像为淘宝镜像

$ npm config set registry https://registry.npm.taobao.org --global
$ npm config set disturl https://npm.taobao.org/dist --global

2.2 查看镜像

$ npm config get registry
https://registry.npm.taobao.org/
$ npm config get disturl
https://npm.taobao.org/dist

2.3 使用nrm工具切换淘宝源

$ npx nrm use taobao
https://registry.npm.taobao.org/

2.4 使用nrm工具切换官方源

$ npx nrm use npm
https://registry.npmjs.org/

2.5 安装 cnpm 命令

$ sudo npm install cnpm -g --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org --global
# 或者
$ sudo npm install cnpm -g

如果安装失败，就到cd /usr/local/lib/node_modules下删除 cnpm目录，命令：sudo rm -rf cnpm，再重新安装。

查看cnpm版本：

$ cnpm -v
cnpm@7.0.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.13 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@17.8.0 (/usr/local/bin/node)
npminstall@5.0.1 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local
darwin x64 19.6.0
registry=https://registry.nlark.com

查看镜像

$ cnpm config get registry
https://registry.nlark.com/

三环境配置

3.1 依赖包

# -save 在package文件的dependence节点写入依赖（-save是默认自带的，可不写）
$ npm install -save moduleName
$ npm install moduleName

# -save-dev 在package文件的devDependence节点写入依赖
$ npm install -save-dev moduleName

# dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块。
# devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它，比如项目中适用gulp，压缩css、js的模块。这些模块在项目部署后是不需要的。

# 项目依赖：在项目的开发阶段和线上运营阶段,都需要依赖的第三方包，称为项目依赖。使用npm install 包名 命令下载的文件会默认被添加到package.json文件的dependencies字段中

# 开发依赖：在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包,称为开发依赖。使用npm install 包名 --save-dev 命令将包添加到package.json文件的devDependencies字段中

3.2 package.json

3.2.1 生成package.json文件

$ cd demo01
$ npm init --yes

自动生成package.json，打开：

{
  "name": "demo01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

安装插件

$ npm install jquery

打开package.json

{
  "name": "demo01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  }
}

# name:项目名称
# version:版本
# description:项目描述
# main:指定了加载的入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。
# scripts:脚本，其中脚本key，可以通过 npm run key进行执行
# keywords:关键字
# author:作者
# license:项目发布遵循什么样的规则，用户拥有那些权限，如：{ "license" : "BSD-3-Clause" }
# dependencies:依赖
# 项目名称（name）和项目版本（version）是必填的，其他都是选填的。有了package.json文件，直接使用npm install命令，就会在当前目录中安装所需要的模块。
$ npm install

# 模块版本:^3.6.0，表示只更新后面两个版本号。~表示只修改右边第一个版本号。

# peerDependencies:
# bin:
# config:
# engines:
# repository:指明了你的仓库位置，帮助用户去迭代你的项目。
# homepage:包的官网地址。
# contributor:包的其他贡献者姓名。

自动生成package-lock.json，打开

{
  "name": "demo01",
  "version": "1.0.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "demo01",
      "version": "1.0.0",
      "license": "ISC",
      "dependencies": {
        "jquery": "^3.6.0"
      }
    },
    "node_modules/jquery": {
      "version": "3.6.0",
      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.6.0.tgz",
      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
    }
  },
  "dependencies": {
    "jquery": {
      "version": "3.6.0",
      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.6.0.tgz",
      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
    }
  }
}

##package-lock.json文件的作用：
# 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题
# 加快下载速度,因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址,重新安装时只 需下载即可,不需要做额外的工作

四安装包

4.1 全局安装 gulp(压缩打包)

4.1.1 安装

$ npm install --global gulp
$ npm install --g gulp

4.1.2 初始化项目文件

# 一键自动生成
$ npm init --yes

# 引导式初始化
$ npm init

按照步骤执行完成：

package name: (demo01) demode01
version: (1.0.0) 1.0.1
description: test es6
entry point: (index.js) index.js
test command: test
git repository:
keywords: es6
author: cyzhong
license: (ISC) ISC
About to write to /Users/chyzhong/temp/nodedemo/demo01/package.json:

{
  "name": "demode01",
  "version": "1.0.1",
  "description": "test es6",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "keywords": [
    "es6"
  ],
  "author": "cyzhong",
  "license": "ISC"
}

Is this OK? (yes) yes

此时，文件目录结构：

demo01 % ll
total 504
drwxr-xr-x    5 chyzhong  staff     160  7 14 23:16 ./
drwxr-xr-x    3 chyzhong  staff      96  7 14 23:09 ../
-rw-r--r--    1 chyzhong  staff  249978  7 14 23:16 package-lock.json
-rw-r--r--    1 chyzhong  staff     260  7 14 23:16 package.json

4.1.3 在项目中引入gulp依赖

$ npm install --save-dev gulp

目录变化：

demo01 % ll
total 504
drwxr-xr-x    5 chyzhong  staff     160  7 14 23:16 ./
drwxr-xr-x    3 chyzhong  staff      96  7 14 23:09 ../
drwxr-xr-x  281 chyzhong  staff    8992  7 14 23:16 node_modules/
-rw-r--r--    1 chyzhong  staff  249978  7 14 23:16 package-lock.json
-rw-r--r--    1 chyzhong  staff     260  7 14 23:16 package.json

进入node_modules后，看见依赖很多包了。

4.2 全局安装babel-cli(编译工具)

4.2.1 安装

# 全局安装
$ npm install babel-cli -g

# 当前项目引入到dev环境
$ npm install --save-dev babel-cli

4.2.2 查看版本

$ babel -V
6.26.0 (babel-core 6.26.3)

4.2.3 实验步骤

4.2.3.1 创建项目

$ cd demo01
$ npm int

4.2.3.2 创建配置文件

新建 .babelrc 文件，内容：

{
  "presets":["es2015","stage-2"],
  "plugins":["transform-runtime"]
}

4.2.3.3 安装库

需要转换成ES2015，安装需要的库

$ npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 --save-dev

package.json会自动补全：

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1"
}

4.2.3.4 配置脚本

package.json配置脚本：

"scripts":{"build":"babel src -w -d lib"}

4.2.3.5 编码

建立lib、src文件夹，并在src下创建index.js，内容如下：

const tips = "学习啦啦啦啦";

console.log(tips);

// ES6
var fn = (v=>console.log(v));

fn("调用方法fn");

4.2.3.6 编译

$ npm run build

lib/index.js内容：

"use strict";

var tips = "学习啦啦啦啦";

console.log(tips);

// ES6
var fn = function fn(v) {
  return console.log(v);
};

fn("调用方法fn");

4.2.3.7 执行

$ npm lib/index.js

# 执行后控制台打印信息：
学习啦啦啦啦
调用方法fn

4.3 安装yarn(js包管理工具)

Yarn是由Facebook、Google、Exponent和Tilde联合推出了一个新的JS包管理工具，正如官方文档中写的，Yarn是为了弥补npm的一些缺陷而出现的。因为NPM5以下会出现下面问题：

npm install的时候巨慢。特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。
同一个项目，多人开发时，由于安装的版本不一致出现bug。

官网：www.yarnpkg.com

4.3.1 安装

$ npm install -g yarn

# 更新版本
$ sudo npm update -g yarn

4.3.2 版本

$ yarn --version
1.22.15   # 2022-03-27

4.3.3 yarn淘宝源安装

$ yarn config set registry https://registry.npm.taobao.org -g
$ yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

4.3.4 yarn初始化项目

$ yarn init
...

# 加入运行时依赖包
$ yarn add jquery
# package.json如下：
{
  "name": "yarn-demo01",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {}
}

# 加入开发时依赖包
$ yarn remove jquery
$ yarn add jquery --dev
# package.json如下：
{
  "name": "yarn-demo01",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "jquery": "^3.6.0"
  }
}

4.3.5 yarn的基本使用

# 初始化项目，同npm init，执行输入信息后，会生成package.json文件
yarn init
# 安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock
yarn install
# 安装一个包的单一版本
yarn install --flat
# 强制重新下载所有包
yarn install --force
# 只安装dependencies里的包
yarn install --production
# 不读取活生成yarn.lock
yarn install --no-lockfile
# 不生成yarn.lock
yarn install --pure-lockfile
# 在当前的项目中添加一个依赖包，会自动更新到package.json和yarn.lock文件中
yarn add [package]
# 安装指定版本，这里指的是主要版本，如果需要精确到小版本，使用-E参数
yarn add [package]@[version]
# 安装某个tag（比如beta, next或者latest
yarn add [package]@[tag]
# 加到devDependencies
yarn add --dev/-D
# 加到peerDependencies
yarn add --peer/-P
# 加到optionalDependencies
yarn add --optional/-O

4.3.6 yarn的优点

速度快、安装版本统一、更简洁的输出、多注册来源处理、更好的语义化

npm	yarm
npm install	Yarn
npm install react --save	yarn add react
npm uninstall react --save	yarn remove react
npm install react --save-dev	yarn add react --dev
npm upddate --save	yarn upgrade

4.3.7 npm与yarn的互相迁移

npm5有一定的优化和提高了。

4.4 webpack(前端模块化打包工具)

4.4.1 安装

4.4.2 webpack插件html-webpack-plugin

# 开发环境 -D
$ npm i html-webpack-plugin -D

五包的使用

5.1 CommonJS规范

require、export、import

5.2 require、module.exports的使用

文件foo.js

module.exports = [1,2,3,4,5,6,7,8,9]

文件func.js

module.exports = function(args){
    let sum = 0;
    for(let i=0; i<args.length; i++){
        sum += args[i];
    }
    return sum;
}

文件index.js

let num = require('./foo')
console.log(num)

const func = require('./func')

console.log(func(num))

执行：

$ node index.js

# 输出
[
  1, 2, 3, 4, 5,
  6, 7, 8, 9
]
45

六 ES6兼容性解决编译工具

vabel, jsx, traceur, es6-shim