Npm包管理工具_npm install h5-CSDN博客

本文链接：https://blog.csdn.net/qq_42552393/article/details/99672012

一、介绍

Npm包管理工具，JS开发者能够更方便的分享和复用以及更新代码，被复用的代码
被称为包或者模块，一个模块中包含了一到多个js文件。在模块中一般还会包含一个
package.json的文件，该文件中包含了该模块的配置信息。一个完整的项目，需要依赖
很多个模块。

一个完整的npm包含三部分

npm网站-----用于预览npm管理的包
注册机制-----用于上传包，使用数据库来维护包与上传者的信息
客户端-----用于安装包

文档地址：npm Documentation

二、创建一个模块

Node.js的模块是一种能够被发布到npm上的包。创建模块从创建package.json文件
开始，package.json是模块的配置文件。

可以使用npm init命令来初始化package.json文件

$ npm init

name 模块名称
package.json 记录了项目的相关的信息
description 描述信息
Dependencies 依赖关系
devDependencies 环境依赖或测试依赖
optionalDependencies可选择依赖
version 模块版本
main 指定模块入口文件
engines 指定node版本
script 定义当前模块脚本，使用npm run来运行所定义的脚本

使用-y参数创建默认package.json文件

$ npm init -y

三、安装npm

npm会随着node一起被安装到本地。
$ npm install npm@latest -g 更新npm

全局安装cnpm包

npm install -g cnpm

安装淘宝镜像的npm工具

由于默认npm的仓库在国外，下载起来很慢，可以使用淘宝镜像来加快下载速度。
npm install -g cnpm --registry=https://registry.npm.taobao.org

Registry注册中心

官方：注册地址
淘宝：注册地址
私有：http://localIP:port

修改npm权限

执行npm的时候有时会遇到权限不足的情况，可以通过以下方式进行修正。
$ npm config get prefix
$ sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

四、模块安装

如果想要仅在当前模块中使用某个第三方模块，就可以使用npm install的默认安装，默认安装即是本地安装；如果想要在命令行中使用模块，就需要进行全局安装。安装时，如果当前目录中没有node_modules目录，npm就会创建一个该目录。

$ npm install <package_name>

$ npm install
安装所有项目依赖的模块，依赖的模块定义在package.json中
$npm install
安装模块时，默认会将所安装的模块写入到package.json中的dependencies属性，通过添加一些参数改变这个特性。

模块更新

全局更新依赖的模块。
$ npm update <module_name>

模块删除

从node_modules中删除不需要的模块。
$ npm uninstall -g <package_name>

不仅删除node_modules中的依赖，还需要删除package.json中的信息，可以使用save参数。
$ npm uninstall –save -g <package_name>

搭建本地npm仓库（sinopia）

1.安装 $ npm install -g sinopia
2.配置 $ npm set registry http://localhost:4873/
3.添加用户 $ npm adduser --registry http://localhost:4873/
4.发布模块 $ npm publish <module_name>
5.启动 $ sinopia

五、Babel工具

ES6写的代码，NodeJS绝大部分支持，浏览器的支持程度比较弱。所有需要使用Babel工具将ES6的代码转成ES5代码。全局环境下进行 Babel转码。这意味着，如果项目要运行，全局环境必须有 Babel，也就是说项目产生了对环境的依赖。

babel工具-----只转换语法层次的代码
babel-polyfill(垫片)-----将es6的功能性新特性转换成es5的代码

1.全局安装babel工具

$ npm install --global babel-cli

cnpm install --save babel-cli
dependencies:{
	babel-cli:""
}
cnpm install --save-dev babel-cli
devDependencies:{
	babel-cli:""
}

查看版本号:babel --version

2.局部安装babel-preset-latest(安装到当前目录底下)

cnpm install babel-preset-latest

3.添加配置文件配置.babelrc(存放在项目的根目录下)

{"presets":["latest"]}

ES2015转码规则
$ npm install --save-dev babel-preset-es2015 =>es2015
最新转码规则
$ npm install --save-dev babel-preset-latest =>latest
不会过时的转码规则
$ npm install --save-dev babel-preset-env =>env

4.编写ES6代码

5.转换

Babel 命令
babel a.js(文件名) 将转换的结果输出到终端
babel a.js(文件名) --out-file b.js(文件名) 将a.js中的代码转换后输出到b.js文件中(默认是当前目录底下)
babel src(目录名) --out-dir dist(目录名) 将src目录中的所有的文件转换成ES5的代码，最终输出到dist目录底下的同名文件中

六、ES6转ES5升级版

1.将当前目录初始化，成为一个Node项目，在项目中有package.json文件，文件中可以声明该项目需要的包-模块。其他人拿到项目之后，使用cnpm install ,可以直接下载需要的依赖。

cnpm init -y 快速初始化一个项目

2.在项目开发阶段安装babel-cli

cnpm install --save-dev babel-cli

3.在项目开发阶段安装babel-preset-latest

cnpm install --save-dev babel-preset-latest
--save-dev 是在开发阶段依赖的包
--save 是在打包之后依然依赖的包，将安装的记录，需要的依赖，记录到package.json文件中

4.配置文件.babelrc

{"presets":["latest"]}
在这里插入图片描述

5.在package.json中编写脚本，执行转换

"start":"babel src --out-dir dist"
在这里插入图片描述

6.在src目录底下编写es6代码

7.执行脚本

cnpm run start
或者：npm run start
或者：npm start

七、babel-polyfill

Babel默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方（比如Object.assign）都不会转码。举例来说，ES6 在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。