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  

• 查看全局安装目录

  # 查看全局安装时的安装目录 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 }; 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10824.html