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