npm相关之npm初始化、切换npm镜像源、package.json释义、require 的加载机制 & ES6降级处理-babel包

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
    1. 大版本.次要版本.小版本
    2. 小版本：当项目在进行了局部修改或 bug 修正时，修正版本号加 1
    3. 次要版本：当项目在原有的基础上增加了部分功能时，主版本号不变，子版本号加 1
    4. 大版本：当项目在进行了重大修改或局部修正累积较多，而导致项目整体发生全局变化时，主版本号加 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 的使用步骤

  1. 安装 Node.js
  2. 命令行中安装 babel
  3. 配置文件 .babelrc
  4. 运行

• 项目初始化(项目文件夹不能有中文)

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