npm相关之npm初始化、切换npm镜像源、package.json释义、require 的加载机制 & ES6降级处理-babel包
1. npm相关
1.1 已经学过的
npm(node package manager)是node包管理器,我们之前学习过安装卸载包,**首次本地**安装,需要先初始化。
初始化:
npm init -y
npm init --yes
npm init
全局安装:
全局安装的一般都是命令,全局安装之后,在任何文件夹都可以使用这个命令。
全局安装的东西,不能通过require加载。
# 安装命令
npm i 包名 -g
npm install 包名 -g
# 卸载命令
npm un 包名 -g
npm uninstall 包名 -g
本地安装:
# 安装命令
npm i 包名
npm install 包名
# 卸载命令
npm un 包名
npm uninstall 包名
1.2 关于安装第三方包的补充
-
安装第三方包
# 老版本的node安装,后面加 --save,是为了把安装的第三方模块在package.json中做记录,新版不用 npm install 包名 --save # 正常的安装 npm install 包名 # 一次安装多个包,名字之间用空格隔开 npm install 包名1 包名2 包名3 npm i express mysql art-template # 指定包的版本进行安装 npm install 包名@版本号 # 简写 npm i 包名
-
从缓存目录安装包
# 查看缓存目录 npm config get cache # 从缓存目录下载包 # --cache-min 后面跟的是时间,单位是分钟,超过这个时间才去服务器下载 npm install 包名 --cache-min 9999999
-
查看全局安装目录
# 查看全局安装时的安装目录 npm root -g
1.3 切换 npm 镜像源
-
npm 存储包文件的服务器在国外,速度很慢,所以我们需要解决这个问题。
-
国内淘宝的开发团队把 npm 在国内做了一个备份,网址是:http://npm.taobao.org/。
# 查看当前的源 npm config ls # 在上面命令的结果有,有下面一行,该行记录的网站就是我们安装第三方模块的网站 # registry = "https://registry.npmjs.org/" # 下载包的时候切换源 npm install express --registry=https://registry.npm.taobao.org # 全局设置 npm config set registry https://registry.npm.taobao.org # 原始的路径 # https://registry.npmjs.org/ # nrm 是管理镜像源的模块,通过nrm来管理镜像源 npm i nrm # 自行查询如何使用
1.4 package.json
在初始化之后,会生成一个package.json文件
-
创建
package.json
npm init npm init -y
-
main
main 字段指定了加载的入口文件
-
dependencies 依赖(复数)
- 指定了当前项目所依赖(需要)的包
- 软件的版本号 jQuery@3.3.1
- 大版本.次要版本.小版本
- 小版本:当项目在进行了局部修改或 bug 修正时,修正版本号加 1
- 次要版本:当项目在原有的基础上增加了部分功能时,主版本号不变,子版本号加 1
- 大版本:当项目在进行了重大修改或局部修正累积较多,而导致项目整体发生全局变化时,主版本号加 1
"dependencies": { "art-template": "^4.14.2", "body-parser": "^1.18.3", "express": "^4.16.4", "express-art-template": "^1.0.1" }
dependencies
字段指定了项目运行所依赖的模块- 使用
npm install
可以安装所有的依赖 - 该对象的各个成员,分别由模块名和对应的版本要求组成,表示依赖的模块及其版本范围。
- 指定版本:比如
1.2.2
,遵循“大版本.次要版本.小版本”的格式规定,安装时只安装指定版本。 - 波浪号(tilde)+指定版本:比如
~1.2.2
,表示安装1.2.x的最新版本(不低于1.2.2),但是不安装1.3.x,也就是说安装时不改变大版本号和次要版本号。 - 插入号(caret)+指定版本:比如ˆ1.2.2,表示安装1.x.x的最新版本(不低于1.2.2),但是不安装2.x.x
- 指定版本:比如
-
scripts
scripts
指定了运行脚本命令的 npm 命令行缩写,比如start指定了运行npm run start
时,所要执行的命令。"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node app.js", "t": "dir c:\\" }
运行
scripts
npm run t npm run start # 只有 start 可以简化调用 npm start
依赖的作用:
- 记录项目必须的包
- 发送给别人的时候,不需要发送比较大的
node_modules
文件夹。只需要发送给你package.json
即可,你只需要执行npm install
即可安装所有的包
自定义命令
1.5 一个神秘的文件夹 node_modules
-
我们下载第三方包的时候,会自动把下载的第三方包,放到
node_modules
中。使用第三方包的时候直接require('第三方包的名字')
。 -
我们自己写的包也可以放到此文件夹,加载的时候直接写包名即可。
-
require
的加载顺序-
打印 module 对象
-
包加载的过程,按照
module.paths
中的路径一级一级往上查找
-
- 第一次
require()
加载完毕,会把 模块/包 缓存起来,再次require()
的时候直接从缓存加载。
1.6 require 的加载机制
require
优先加载缓存中的模块- 如果缓存中没有模块,优先加载核心模块(node自带的模块,比如fs、path、http),并缓存
- 如果有相对路径,则根据路径加载文件模块,并缓存
require('./main')
省略扩展名的情况- 先加载
main.js
,如果没有再加载main.json
,如果没有再加载main.node
(c/c++编写的模块)
- 如果不是文件模块,也不是核心模块,则加载第三方模块(npm安装的模块)
- node 会去 node_modules 目录中找(找跟你引用的名称一样的目录),例如这里
require('moment')
- 如果在 node_modules 目录中找到
moment
目录,则加载该模块并缓存 - 如果过程都找不到,node 则取上一级目录下找
node_modules
目录,规则同上 - 如果一直找到代码文件的根路径还找不到,则报错
实例
1、在npm空文件夹安装
npm init # 初始化,生成package.json文件和 node_modules 目录文件夹
2、在node_modules文件目录下,一个文件夹就是一个包文件
3、app.js中进行打印包文件数据
app.js原文件
npm/app.js
// 它会去node_modules/mysql里面找index.js ,因为package.json中规定了入口文件是index.js
const mysql = require('mysql');
const db = require('./db');
// 导入自己的文件模块
// const db = require('db'); // 不加 ./ 就会报错
// console.log(db.aa);
// const aaaa = require('aaaa');
// console.log(aaaa.abcd);
npm/db.js
module.exports = {
aa: 123
}
npm/package.json
{
"name": "abcd",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"abc": "node app.js",
"qh": "npm config set registry https://registry.npm.taobao.org",
"start": "node app.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^2.2.4",
"mysql": "^2.17.1"
}
}
2. ES6降级处理
因为 ES 6 有浏览器兼容性问题,可以使用一些工具进行降级处理,例如:babel
-
降级处理 babel 的使用步骤
- 安装 Node.js
- 命令行中安装 babel
- 配置文件
.babelrc
- 运行
-
项目初始化(项目文件夹不能有中文)
npm init -y
-
在命令行中,安装 babel babel官网
npm install @babel/core @babel/cli @babel/preset-env
-
配置文件
.babelrc
(手工创建这个文件)babel 的降级处理配置
{ "presets": ["@babel/preset-env"] }
-
在命令行中,运行
# 把转换的结果输出到指定的文件 npx babel index.js -o test.js # 把转换的结果输出到指定的目录 npx babel 包含有js的原目录 -d 转换后的新目录
实例1-转换文件
代码
1、转换前文件1.js
let fn = x => x * x;
let a = 11;
let b = 22;
let c = {
a,
b
}
2、转换命令
npx babel 1.js -o 2.js
3、转换后新生成文件2.js
"use strict";
var fn = function fn(x) {
return x * x;
};
var a = 11;
var b = 22;
var c = {
a: a,
b: b
};
实例2-转换文件夹
代码
1、原始js文件夹里的a.js文件和b.js文件的内容,如下
let fn = x => x * x;
let a = 11;
let b = 22;
let c = {
a,
b
}
2、转换文件夹命令
npx babel js -d js1
3、转换新生成的js1文件夹
js1文件夹里的a.js和b.js文件的内容,如下
"use strict";
var fn = function fn(x) {
return x * x;
};
var a = 11;
var b = 22;
var c = {
a: a,
b: b
};