简介

npm全称node package manager，是node包管理和分发工具。可以理解为前端的maven。通过npm可以很方便的下载js库，管理前端工程。node已经集成npm工具，在cmd中输入npm -v查看当前npm版本。

参考资料

认识 npm

发展简介

  • npm：npm是一个JavaScript的包管理程序（Node Package Manager）—>类似与java的maven
  • npm的由来：当一个项目依赖的代码越来越多，程序员发现这是一件很麻烦的事情：
    • 我要去哪里下载我要的第三方依赖？
    • 我要用什么版本？
    • 如何更新我已经使用的第三方依赖？
    • 等等。。。。。。
    • 有些程序员就受不鸟了，一个拥有三大美德的程序员 Isaac Z. Schlueter （以下简称 Isaaz）给出了一个解决方案：用一个工具把这些代码集中到一起来管理吧！这个工具就是他用 JavaScript （运行在 Node.js 上）写的 npm，全称是 Node Package Manager

介绍

  • npm（全称Node Package Manager，即node包管理器）

  • 是Node.js默认的、以JavaScript编写的软件包管理系统

  • npm 来分享和使用代码已经成了前端的标配

  • 官网： https://www.npmjs.com

  • npm被全球超过1100万开发人员所依赖

  • 拥有超过一百万个软件包，是世界上最大的软件注册表

  • npm的思路大概是这样的：

    • 买个服务器作为代码仓库（repository），在里面放所有需要被共享的代码

  • 发邮件通知 jQuery 、Bootstrap 、Underscore 的作者使用 npm publish 把代码提交到 repository 上，分别取名 jquery、bootstrap 和 underscore（注意大小写）

    • 社区里的其他人如果想使用这些代码，就把 jquery、bootstrap 和 underscore 写到 package.json 里，然后运行 npm install ，npm 就会帮他们下载代码
    • 下载完的代码出现在 node_modules 目录里，就可以随意使用了。
      这些可以被使用的代码被叫做「包」（package），这就是 npm名字的由来：Node Package(包) Manager(管理器)。

    npm

安装 npm

  • npm是Node.js默认的软件包管理系统
  • 安装完毕node后，会默认安装好npm
  • npm本身也是基于Node.js开发的软件
  • 下载Node: http://nodejs.cn/download/ 下载对应的安装包进行安装
  • npm 的发展是跟 node.js 的发展相辅相成的。node.js 是由一个在德国工作的美国程序员 Ryan Dahl 写的。他写了 node.js，但是 node.js 缺少一个包管理器，于是他和npm的作者一拍即合、抱团取暖，最终 node.js 内置了 npm

使用 npm工具管理包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
#查看node版本
ada@ASUS:~$ node -v
v14.15.4
#查看npm版本（如果查看不到：linux可能需要ln -s建立软链接，windows需要配置环境变量）
#ada@ASUS:~$ ln  -s  [源文件或目录]  [目标文件或目录]
#ada@ASUS:~$ ln -s /home/ada/software/programming/node/node-v14.15.4-linux-x64/bin /usr/local/bin/npm
ada@ASUS:~$ npm -v
7.6.3

#设置淘宝镜像并查看镜像源
#方式一：cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm config get registry 
#方式二：npm
npm config set registry  
npm config get registry 
#方式三：使用nrm工具切换镜像源
npx nrm use taobao（换淘宝源）
npx nrm use npm (换回官方源)
npm config get registry （查看当前镜像源）


#安装vue-cli（默认是最新版本）
npm install -g @vue/cli
vue --version

#安装/升级npm -g(全局安装)   npm -g install npm@5.9.1  （@后跟版本号可以指定npm版本） 
ada@ASUS:~$ npm install npm -g

#安装模块[可选参数：-g，全局安装 Module Name@版本号指定版本安装，默认安装最新版本 ]
npm install <Module Name>[@版本号] [-g]

#更新模块
npm update <Module Name> [-g]

#卸载模块
npm uninstall <Module Name>

#运行时依赖,-save参数指定后会在package.json文件中：dependencies节点下写入依赖（不加save默认也是开发时依赖）
npm install -save <Module Name>
#开发时依赖，-save-dev参数指定后会在package.json文件中：devDependencies节点下写入依赖，开发时候需要的环境，上线不需要的比如压缩代码这些依赖
npm install -save-dev <Module Name>

#查看所有全局安装的模块
npm list -g
#查看某个模块版本(需要先进入该项目路径)
npm list <Module Name>
#初始化package.json文件[--yes 参数值默认配置，不加需要手动自命名或者自行再修改]
npm init [--yes]

#清空本地缓存（删除删除node_modules包、删除package.json.lock） 使用npm cache clear可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人。
sudo npm cache clean --force
npm cache verify

#使用npm unpublish <package>@<version>可以撤销发布自己发布过的某个版本代码。

  • *注:*安装Node时默认安装npm
  • 需要安装包时先进入项目根路径然后通过npm install 进行安装，安装时自动递归创建node_modules文件夹和包文件夹
  • devDependencies：开发时的依赖，里面的模块都是开发时候用的，发布发到正式环境以后就用不到它了，比如项目中使用的测试模块，调试的一些东西还有gulp,压缩css、js的module
  • dependencies:运行时的依赖，发布后即在生产环境还是需要用到的模块
  • 不加-save参数默认是开发时依赖

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#生成 package.json 文件（加 --yes 参数即为赋予默认值，不加的话也可以一个个参数进行设置，可用 默认值然后去 package.json 文件中再次修改）
npm init --yes

#参数详解
name - 包名。
version - 包的版本号。
description - 包的描述。
homepage - 包的官网 url 。
author - 包的作者姓名。
contributors - 包的其他贡献者姓名。
dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
keywords - 关键字

#scripts 节点
vue下的scripts 可通过子节点名设置对应执行的命令如：npm run dev 实际执行的就是vue-cli-service serve，可自行修改
"scripts": {
  "dev": "vue-cli-service serve",
  "build": "vue-cli-service build"
}
#版本（启动项目npm install 的时候会去生成锁文件，锁定版本）
~4.5.X 安装4.5中的最大版本  
^4.X.X 安装4中的最大版本
4.5.1 安装4.5.1版本

生成 package.json文件

模块的基本应用

  • 没有webpack之前搜寻整个 node_modules 目录来定位每个包的路径再手动添加到我们 HTML 文件中（实在太太不方便了,示例如下 先引入路径后使用模块）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <!--    引入模块-->
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<!--使用模块-->
<script>
    $(function () {

    });
</script>
</body>
</html>
  • 大多数编程语言都会提供从一个文件导入另一个文件代码的机制。然而 JavaScript 最初设计时并没有这个特性，因为 JavaScript 原本是为了在浏览器端运行而设计的，并没有权限获取计算机客户端的文件系统（安全考虑）。所以很长一段时间以来，组织多个文件的 JavaScript 代码就是把每个文件下载下来，变量是全局共享的。
  • CommonJS 中很大的一部分便是对模块系统的规范，
  • 使用require语句导入包 （新的ES6可以使用import导入包）

require语句导入

npm 和 yarn 的对比及迁移

简介

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

安装

  • 方式一：下载node.js，使用npm安装
    • npm install -g yarn
    • 查看版本：yarn –version
  • 方式二：下载yarn的安装程序:提供一个.msi文件，在运行时将引导您在Windows上安装Yarn
  • Yarn 淘宝源安装，分别复制粘贴以下代码行到黑窗口运行即可
1
2
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

基本使用

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

//默认安装包的主要版本里的最新版本，下面两个命令可以指定版本：
yarn add --exact/-E 		// 安装包的精确版本。例如yarn add foo@1.2.3会接受1.9.1版，但是yarn add foo@1.2.3 --exact只会接受1.2.3版
yarn add --tilde/-T 		//安装包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde会接受1.2.9，但不接受1.3.0
发布包  yarn publish
移除一个包  yarn remove <packageName>     会自动更新package.json和yarn.lock
更新一个依赖  yarn upgrade 用于更新包到基于规范范围的最新版本
运行脚本  yarn run 用来执行在 package.json 中 scripts 属性下定义的脚本
显示某个包的信息 yarn info <packageName> 可以用来查看某个模块的最新版本信息
缓存  yarn cache
yarn cache list      	# 列出已缓存的每个包 
yarn cache dir  	# 返回 全局缓存位置
yarn cache clean	 # 清除缓存

优点

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

yarm 优点

npm 迁移值 yarn

  • 可以从npm迁移到yarn，也可以从yarn迁移到npm。
  • 有了yarn的压力之后，npm做了一些类似的改进，在npm5.0之前，yarn的优势特别明显。但是在npm之后，通过以上一系列对比，我们可以看到 npm5 在速度和使用上确实有了很大提升，值得尝试。
  • 如果你已经在个人项目上使用 yarn，并且没有遇到更多问题，目前完全可以继续使用。但如果有兼容 npm 的场景，以及还没有切到 yarn 的项目，那现在就可以试一试 npm5 了。

实践

解决 ES6 兼容问题

ES6转换

  • ES6 的语法对于有些老的浏览器不兼容 比如定义变量 const let 这些标识符 无法识别，需要转换成 ES5 的语法，一般有在线解决和提前编译两种方案

  • 比较通用的工具方案有babel，jsx，traceur，es6-shim等

  • 兼容表：http://kangax.github.io/compat-table/es6/

  • IE10+、Chrome、FireFox、移动端、NodeJS现在都支持

方式一：在线解决（客户端）

:x:在线转换（通过工具包的方式，这种编译会加大页面渲染的时间,不推荐）

  • 在script 中引入 babel-core 的 js 文件
  • body 中注意声明 type="text/babel"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <script src=""></script>
    <script src="https://lib.baomitu.com/babel-core/5.8.38/browser.js"></script>
</head>
<body>
<script type="text/babel">
    const name = "this is ada";
    console.log(name);
</script>
</body>
</html>

方式二：提前编译（服务端）

:o:提前编译（强烈建议这种方式，不影响浏览器渲染时间）

  • 安装依赖
1
2
3
4
# 开发环境依赖安装 babel-cli
sudo npm install -save-dev babel-cli
#环境验证 6.26.0 (babel-core 6.26.3)
babel -V
  • 项目根路径新建.babelrc 文件
1
2
3
4
{
  "presets": ["es2015", "stage-2"],  //设置转码规则
  "plugins": ["transform-runtime"]  //设置插件
}
  • 安装 es2015 对应的库
1
2
#   "presets": ["es2015", "stage-2"] 上面转码规则设置的 es2015 因此需要安装对应的依赖
npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 -save-dev
  • 绑定命令
1
2
3
4
# package.json 文件中scripts标签新增一条指令 通过运行 npm run babel 即可把 src 目录下的文件 编译到 babelSrc 下
"scripts": {
    "babel": "babel src -w -d babelSrc"
  }

编译整个 src 目录并将其输出到 babelSrc 目录。这里的src指的是需要转换的目录，babelSrc指的是输出的内容的存放目录，-w其实是-watch的意思，就是监听文件，实时编译输出
新建src目录和babelSrc目录，记得一定要建，不然会报错，然后我们启动我们的babel工程。
命令行输入npm run babel

babel 解决兼容