2.2.3. 全局安装
刚才我们使用的是本地安装，会将js库安装在当前目录，而使用全局安装会将库安装到你的全局目录下。全局安装之后可以在命令行 使用该安装的模块对应的内容或命令。
如果你不知道你的全局目录在哪里，执行命令查看全局目录路径
npm root -g
比如全局安装jquery， 输入以下命令
# 安装之后在全局目录下会存在对应的jquery目录，其里面的dist则包含有对应的jquery.js文件 npm install jquery -g
2.2.4. 批量下载
从网上下载某些代码，发现只有package.json，没有node_modules文件夹，这时需要通过命令重新下载这些js库
进入目录(package.json所在的目录)输入命令
npm install
此时，npm会自动下载package.json中依赖的js库。
2.2.5. 切换NPM镜像
有时我们使用npm下载资源会很慢，所以可以切换下载的镜像源(如:淘宝镜像);或者安装一个cnmp(指定淘宝镜 像)来加快下载速度。
1、如果使用切换镜像源的方式，可以使用一个工具:nrm
首先安装nrm，这里 -g 代表全局安装
# 管理员身份 打开cmd执行如下命令 npm install nrm -g
然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库:
然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库:
2、如果使用cnpm的方式，则先安装cnpm，输入如下命令
# 如果不使用nrm 切换，可以在安装cnpm的时候指定镜像仓库 npm install -g cnpm --registry=https://registry.npm.taobao.org
安装后，我们可以使用以下命令来查看cnpm的版本
cnpm -v
使用cnpm
cnpm install 需要下载的js库;一般只有在下载模块的时候才使用cnpm，其它情况还是一样使用npm;
2.2.6. 运行工程说明
如果我们想运行某个工程，则使用run命令
如果package.json中定义的脚本中有:
- dev是开发阶段测试运行
- build是构建编译工程
- lint 是运行js代码检测
运行时命令格式:
npm run dev或者build或者lint
2.2.7. 编译工程说明
编译后的代码会放在dist文件夹中，进入命令提示符输入命令
npm run build
生成后会发现只有个静态页面，和一个static文件夹 这种工程我们称之为单页Web应用(single page web application，SPA)，就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 这里其实是调用了webpack来实现打包的，关于webpack下面的章节将进行介绍。
3. Webpack入门
3.1. 什么是Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpackjs
从图中我们可以看出，Webpack 可以将多种静态资源 js、css等转换成一个静态文件，减少了页面的请求。 接下来简单为大家介绍 Webpack 的安装与使用。
3.2. Webpack安装
全局安装
npm install webpack -g npm install webpack-cli -g
安装后查看版本号
webpack -v
3.3. 快速入门
3.3.1. JS打包
(1)创建src文件夹，创建bar.js
1.exports.info=function(str){ document.write(str); }
(2)src下创建logic.js
exports.add=function(a,b){ return a+b; }
(3)src下创建main.js
var bar= require('./bar'); var logic= require('./logic'); bar.info( '100 + 200 = '+ logic.add(100,200));
(4)创建配置文件webpack.config.js ，该文件与src处于同级目录
var path = require("path"); //exports 就是 module.exports， // 但是这里直接是赋值，所以不能直接使用exports，否则exports就不是module.exports了 module.exports = { //入口文件 entry: "./src/main.js", output: { //__dirname 是node的一个全局变量，获得当前文件所在目录的完整目录名 path: path.resolve(__dirname, "./dist"), filename: "bundle.js" } }
以上代码的意思是:读取当前目录下src文件夹中的main.js(入口文件)内容，把对应的js文件打包，打包后的文件 放入当前目录的dist文件夹下，打包后的js文件名为bundle.js
(5)执行编译命令
(7)创建index.html ,引用bundle.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nodejs测试</title> <script src="dist/bundle.js"></script> </head> <body> </body> </html>
浏览器上访问index.html文件，会发现有内容输出。
3.3.2. CSS打包
(1)安装style-loader和 css-loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript;style-loader 是让 javascript 认识css
cnpm install style-loader css-loader --save-dev
cnpm install less less-loader --save-dev
(2)修改webpack.config.js
var path = require("path"); //exports 就是 module.exports， // 但是这里直接是赋值，所以不能直接使用exports，否则exports就不是module.exports了 module.exports = { //入口文件 entry: "./src/main.js", output: { //__dirname 是node的一个全局变量，获得当前文件所在目录的完整目录名 path: path.resolve(__dirname, "./dist"), filename: "bundle.js" }, module: { rules: [{ test: /\.css$/, use: ["style-loader", "css-loader"] } ] } }
(3)在src文件夹创建css文件夹,css文件夹下创建css1.css
body { background-color: blue; }
(4)修改main.js ，引入css1.css
(5)重新运行webpack
6)运行index.html看看背景是不是变成蓝色?
