NPM 包管理工具

一、认识npm

npm(全称为：Node Package Manager,即node包管理器)
是Node.js默认的、以JavaScript编写的软件包管理系统。使用npm来分享和使用代码已经成为一种主流
官网：https://www.npmjs.com

二、npm镜像的设置与查看

搭建环境时通过如下代码将npm设置成淘宝镜像

1 2	npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global

设置当前地址，设置为默认地址

1	npm config set registry https://registry.npmjs.org/

查看镜像的配置结果

1 2	npm config get registry npm config get disturl

使用nrm工具切换淘宝源
1
npx nrm use taobao
如果之后要切换回官方源可以使用
1
npx nrm use npm
三、使用npm
npm常用命令
- npm -v :通过查看版本，看npm是否安装成功
- npm install <Module Name> ：使用npm命令安装模块
- npm install <Module Name> -g：可以直接在命令行中使用
- npm list -g:查看所有全局安装的模块
- npm list vue:查看某个模块的版本号
- npm -g install npm@5.9.1：（@后面跟着版本号）这样可以更新npm版本
- npm install -save moduleName：#-save在package文件的dependencies节点写入依赖。
- npm install -save-dev moduleName：#-save-dev在packag文件的devDependencies节点写入依赖。
- dependencies：运行时依赖，发布后，即生产环境下还需要使用的模板。
- devDependencies:开发时的依赖。里面的模块是开发时用的，发布时用不到它，比如项目中使用gulp,压缩css、js的模块。这些模块在我们项目部署后是不需要的。
Package.js属性说明
- name ：包名
- version：包的版本号
- description：包的描述
- homepage：包的官网url
- author：包的作者姓名
- contributors：包的其他贡献者姓名
- dependencies：依赖包列表。如果依赖包没有安装，npm会自动将依赖包安装在node_module目录下
- repository：包代码存放的地方的类型，可以是git或svn,git可在GitHub上
- main：main字段指定的程序的主入口文件，require(‘moduleName’)就是加载这个文件，这个字段的默认值是模块根目录下的index.js
- Keywords：关键字

关于版本

  // ^表示匹配到后面两个小版本的最高版本 ^0.x.x
  "dependencies": {
   "qrcodejs2": "^0.0.2"
 }
 // ~表示匹配到最后一个小版本的最高版本 ^0.0.x
  "dependencies": {
   "qrcodejs2": "~0.0.2"
 }
// 若版本前不加任何修饰符，则表示只安装这个版本
  "dependencies": {
   "qrcodejs2": "0.0.2"
 }

包的使用
- 通过命令使用npm 下载和更新包
- 没有webpack之前搜寻整个node_modules目录来定位每个包的路径再手动添加到我们HTML文件中（不太方便）
- ComminJS中很大一部分便是对模块系统的规范
- 使用require语句导入包
- 新的ES6可以使用import导入包
ES6兼容性解决：
- 兼容表：http://kangax.github.io/compat-table/es6/
- IE10+、Chrome、FireFox、移动端、NodeJs现在都支持
- 兼容低版本浏览器
  - 在线编译：会加大页面的渲染时间
  - 提前编译：强烈建议使用这个方式，不影响浏览器渲染时间
- 比较通过的Es6转Es5的工具：babel,jsx,traceur,es6-shim
  三、服务端将Es6转Es5
使用npm全局安装babel-cli包
1
npm install --save-dev babel-cli

在项目的目录下新建babel.config.js文件

{
     //@babel/preset-env
    "presets":["es2015","stage-2"],  //设置转码规则·
    "plugins":["transform-runtime"]  //设置插件
}

需要转换成es2015,安装需要安装的库

1	npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 --save-dev

打开项目下的package.js文件，进行如下修改

1	"scirpts":{"build":"babel src-w-d lib"} //编译整个src目录并将其输出到lib目录。

编译整个src目录并将其输出到lib目录。这里的src指的是需要转换的目录，lib指的是输出的内容的存放目录， -w其实是-watch的意思，就是在监听文件，实时编译输出。
新建src目录和lib目录，这两个目录必须都存在。然后启动项目
运行命令为npm run build

NPM 包管理工具

一、认识npm

二、npm镜像的设置与查看

三、使用npm

三、服务端将Es6转Es5