NPM知识总结

NPM

认识npm

npm(全称Node Package Manager，即node包管理器)
是Node.js默认的、以JS编写的软件包管理器
npm来分享和使用代码已成前端的标配。
官网：https://www.npmjs.com
npm被全球超过1100万开发人员所依赖
拥有超过一百万个软件包，是世界上最大的软件注册表
cmd.exe里运行命令

npm中文网

包：https://www.npmjs.com/
文档：https://www.npmjs.cn/

安装NPM工具

npm是Node.js默认的软件包管理系统
安装完毕node后，会默认安装好npm
npm本身也是基于Node.js开发软件
下载Node：http://nodejs.cn

node -v
npm -v
npm install npm -g // 全局安装
npm install jquery //在工程目录下安装

国外网站下载速度慢，使用国内淘宝的镜像加快速度
从配置文件里注册表

npm config get registry

设置配置文件注册表是阿里镜像：

npm config set registry https://registry.npm.taobao.org/ -g
npm config set disturl https://registry.npm.taobao.org/ -g

使用nrm工具切换淘宝源

npx nrm use taobao

设置默认的地址：

npm config set registry https://registry.npmjs.org/

定义npm是默认配置，cnpm是淘宝镜像

npm install -g cnpm --registry-https://registry.npm.taobao.org 

NPM基本使用

通过查看版本，看npm 是否安装成功

npm -v 

使用npm 命令安装模块

npm install <module name>

可以直接在命令行里使用，全局安装

npm install <Module Name> -g

查看所有全局安装的模块

npm list -g

查看某个模块的版本号

npm list vue

（@后跟版本号）这样我们就可以更新npm版本

npm -g install npm@5.9.1

# -save 在package文件的dependencies节点写入依赖

npm install -save moduleName

# -save-dev 在package文件的devDependencies节点写入依赖

npm install -save-dev moduleName

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

更新包到最新版本

npm update <module name> 

卸载包

npm uninstall <module name>

package.json文件属性说明

生成package.json文件

npm init --yes //忽略选项
npm init //一步一步设置

写入自定义hello命令

{
    "name": "eduwork",
    "version": "1.0.1",
    "description": "this is eduwork porject",
    "main": "index.js"
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "hello": "node -v"
    },
    "repository": {
        "type": "git",
        "url": "git"
    },
    "keywords": [
        "edu",
        "work",
        "vue",
        "react"
    ],
    "author": "dys",
    "license": "MIT"
}

执行自定义命令

npm run hello

安装jquery

npm install jquery -save

package-lock.json文件里开发依赖

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

版本号配置

package.json文件中的版本号的说明，安装的时候代表不同的含义：
"5.0.3"表示安装指定的5.0.3版本
"~5.0.3"表示安装5.0.X中最新的版本
"^5.0.3"表示安装5.X.X中最新的版本

实际开发中，module目录下无需传递，删除module目录下下载的包。另一台机器npm install 能够自动下载。不麻烦，并且减少传输大小。再也不用担心因为容量大，需要传输几个小时。

{
  //包名
  "name": "eduwork",  
  
   //包的版本号
  "version": "1.0.1",
  
   //包的描述
  "description": "this is description",
  
    //字段指定了程序的主入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js
  "main": "index.js",  

    // 命令可用 npm run test/...运行
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "hello": "node -v"
  },

   /包代码存放的地方的类型，可以是git或svn，git可在Github上
  "repository": {
    "type": "git",
    "url": "git"
  },
   //包的作者姓名
  "author": "dys",
  
  "license": "MIT",
  
  //依赖包列表。如果依赖包没有安装，npm会自动将依赖包安装在node_module目录下
  "dependencies": { 
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "bootstrap": "^5.1.3"
  }
}

homepage     -包的官网url
contributors     -包的其他贡献者姓名
keywords   -关键字

npm常用命令

npm提供了很多命令，例如install和publish，使用npm help可查看所有命令。
使用npm help <command> 可查看某条命令的详细帮助，例如

npm help install

在package.json 所在目录下使用， 可先在本地安装当前命令行程序，可用于发布前的本地测试。

npm install . -g

可以把当前目录下node_modules 子目录里边的对应模块更新至最新版本。

npm update <package>

可以把全局安装的对应命令行程序更新至最新版。

npm update <package> -g 

可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人。

npm cache clear 

可以撤销发布自己发布的某个版本代码。

npm unpublish <package>@<version> 

NPM安装包的使用

eduwork项目文件夹下新建index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
</head>

<body>

    <script>
        $(function() {
            console.log(111);
        })
    </script>
</body>

</html>

eduwork项目文件夹下新建foo.js

module.exports=100

项目文件夹下新建index.js

const $ = require('jquery')

let num = require("./foo.js");
console.log(num)

在cmd运行index.js文件

node index.js

项目文件夹下新建func.js，暴露module.exports = …

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

在index.js引入代码require(…)，此时foo.js里面修改成module.exports = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const $ = require('jquery');

let nums = require('./foo.js');

const fun = require('./func');

console.log(fun(nums));

练习通过npm安装包来解决ES6语法兼容性问题

练习：ES6兼容性解决
ES6语法在老版本浏览器会报错。
兼容表：http://kangax.github.io/compat-table/es6/
IE10+、Chrome、FireFox、移动端、NodeJS现在都支持ES6
兼容低版本浏览器方式：
在线转换（缺点：加大页面渲染时间，响应蛮，半天刷新不过来）
提前编译（推荐方式，不影响浏览器渲染）

//ES6
var fn = (v=>console.log(v))
转换成
//ES5
“use strict”
var fn = function fn(v){
return console.log(v);
};
(工具有bable,jsx,traceur,es6-shim等。)

到静态资源库中版本复制地址

前端静态资源库：https://cdn.baomitu.com/

，在项目文件夹下新建demo.html，引入babel-core

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://lib.baomitu.com/babel-core/5.8.38/browser.js"></script>
    </head>
    <body>
        <script type="text/babel">
            const name = "学习天地"
            console.log(name);
            
        </script>
    </body>
</html>

1.使用NPM全局安装babel-cli包。
2.找一个目录，用npm来初始化一个项目，用来搭建我们的babel环境。（ npm init ）或（npm init -y）。
3.babel提供的一个编译工具babel-node，也可以执行我们的js代码（babel-node index.js）
4.在项目目录下新建.babelrc文件（这是babel的配置文件）
{
“presents”:[“es2015”,“stage-2”],//设置转码规则
“plugins”:[“transform-runtime”]//设置插件
}
5.需要转换成es2015，安装我们需要的库：

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

6.打开我们babel项目下的package.json文件，如下修改

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

7.编译整个src目录并将其输出到lib目录。这里的src指的是需要转换的目录，lib指的是输出的内容的存放目录，-w其实是-watch的意思，就是监听文件，实时编译输出。

8.新建src目录和lib目录，记得一定要建，不然会报错，然后启动babel工具
9.命令行输入npm run build

npm install --save-dev  babel-cli -g

查看babel版本

babel -V

NPM的竞品yarn的安装和使用

Yarn是什么？
yarn是由Facebook、Google、Exponent和Tilde联合推出了一个新的JS包管理工具，正如官方文档中写的，Yarn是为了弥补npm的一些缺陷而出现的。因为NPM5以下会出现下面的问题：
>>npm install的时候巨慢，特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。
>>同一个项目，多人开发时，由于安装的版本不一致出现bug
官网：www.yarnpkg.com

yarn的安装

>>下载node.js，使用npm安装

npm install -g yarn
查看版本：yarn --version

>>安装node.js下载yarn的安装程序:
提供一个.msi文件，在运行时将引导您在Windows上安装Yarn

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

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

yarn使用练习

初始化工程，生成package.json

yarn init

{
  "name": "eduwork",
  "version": "1.0.11",
  "description": "this is yarn test",
  "main": "index.js",
  "author": "dys",
  "license": "MIT"
}

添加包

yarn add <module name>

{
  "name": "eduwork",
  "version": "1.0.11",
  "description": "this is yarn test",
  "main": "index.js",
  "author": "dys",
  "license": "MIT",
  "dependencies": {
    "jquery": "^3.6.0"
  }
}

删除包

yarn remove jquery

加到devDependencies

yarn add jquery --dev

yarn官网

https://yarnpkg.com/

yarn的优点

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

npm / yarn
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 update --save / yarn upgrade

从npm迁移到yarn

>>可以从npm迁移到yarn，也可以从yarn迁移到npm

>>有了yarn的压力之后，npm做了一些类似的改进，在npm5.0之前，yarn的优势特别明显。但是在npm之后，通过以上一系列的对比，我们可以看到npm5在速度和使用上确实有了很大提升，值得尝试。

>>如果你已经在个人项目上使用yarn，并且没有遇到更多问题，目前完全可以继续使用。但是如果有兼容npm的场景，以及还没有切到yarn的项目，那现在就可以试一试npm5了。