前端构建_Nodejs

前端模块化

• 主要解决的问题

1、命名冲突
2、文件依赖及顺序

• 前端模块化规范

1、CommonJS规范：Nodejs模块化遵循CommonJS规范
2、AMD规范：异步模块规范，是RequireJS在推广过程中对模块定义的规范化产出的，推崇依赖前置；
3、UMD规范：兼容AMD和commonJS规范的同时，还兼容全局引用的方式；
4、CMD规范：是SeaJS 在推广过程中对模块定义的规范化产出的，推崇依赖就近；
5、ES6模块化规范：ES6模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量；

Nodejs使用的模块化开发规范就是CommonJS
前端使用的模块化开发规范就是ES6

前端模块化

CommonJS

• 应用场景

CommonJS 是 Nodejs模块化 实现所使用的规范，只能用于Nodejs，不能使用在浏览器

• 导出

var num = 16;
var sayHello = function (lang) {
    return helloInLang[lang];
}

module.exports.num = num;
module.exports.sayHello = sayHello;
// 或者这样写
exports.num = num;
exports.sayHello = sayHello;

• 导入

var m1 = require('./lib/greeting');

• 导入模块-加载机制

1、核心模块（Nodejs内置模块）
var http = require('http');

2、第三方模块
Node使用NPM(Node Package Manager)安装第三方模块
NPM会将模块安装(可以说是下载到)到应用根目录下的node_modules文件夹中
模块加载时，node会先在核心模块文件夹中进行搜索，然后再到node_modules文件夹中进行搜索
var cm = require('cm');

3、自定义模块(文件与文件夹)

文件可放在任何位置
加载模块文件时加上路径即可
var customModule = require('./customModule');

Node首先会在该文件夹中搜索package.json文件，
存在，Node便尝试解析它，并加载main属性指定的模块文件
不存在(或者package.json没有定义main属性)，Node默认加载该文件夹下的index.js文件（main属性其实NodeJS的一个拓展，CommonJS标准定义中其实并不包括此字段）
let demo = require("./modules/demo");

开发环境搭建（3m安装法）

• nvm (推荐)

1、下载nvm-setup.exe 安装文件
2、修改setting.txt文件 （nvm安装目录）

在最后加上
node_mirror: https://npm.taobao.org/mirrors/node/ 
npm_mirror:  https://npm.taobao.org/mirrors/npm/

3、使用
   查看已安装的版本： nvm list
   查看可安装的版本： nvm list available
   安装指定版本：     nvm install 10.15.1
   切换node版本：    nvm use 10.15.1

安装完 nodejs 之后，npm也顺带安装好了，可以使用以下2条命令检测下
node -v
npm -v

• npm

切换源
npm config set registry https://registry.npm.taobao.org

• nrm (切换源使用)

1、安装:             npm i nrm -g --registry=https://registry.npm.taobao.org
2、查看所有支持的源： nrm ls
3、切换npm源：       nrm use taobao

• node-sass 安装失败解决方法

https://segmentfault.com/a/11...

卸载旧版Nodejs

如果电脑上已经安装过nodejs（在用3m安装方式前），就必须先卸载，否则可能出现奇奇怪怪问题

1、卸载nodejs本身
2、手动删除 nodejs目录下的node_modules目录
   例如：c:\Program Files\nodejs\node_modules
3、手动删除 c:\users\你账号名\node_modules

NPM 项目工程化

• 初始化与安装

// 项目没有package.json文件时，使用下列命令
npm init -y

// 项目有package.json文件，但模块未安装时，使用下列命令
npm install   //根据package.json，安装模块

// 全局安装，一般用于安装全局工具（例如：vue-cli等，公用的模块）
npm install -g packageName
// 简写
npm i -g packageName

// 局部安装，分为生产环境和开发环境
npm install packageName --save   //生产环境依赖的模块，会添加条目到package.json的dependencies中
// 简写
npm i packageName -S

npm install packageName --save-dev    //开发环境依赖的模块，会添加条目到package.json的devDependencies中
// 简写
npm i packageName -D

• 更新与删除

// NPM 更新
npm update     // 更新所有局部模块
npm update -g  // 更新所有全局模块
npm update -g pkg  // 更新全局某模块
npm update pkg  // 更新局部某模块

// NPM 删除
npm uninstall -g <package>  // 卸载全局软件包
npm uninstall <package>     // 从node_modules目录中移除一个包
npm uninstall --save <package>     // 从package.json的dependencies中移除一个包。
npm uninstall --save-dev <package>      // 从package.json的devDependencies中移除一个包。

Node的模块（3种）

• 全局模块

无需 npm下载安装，无需导入，直接使用

process.env  // 环境变量
process.argv // 参数

• 系统模块

无需 npm下载安装，只需要导入就可以使用

const http = require('http')
const fs = require('fs')

• 自定义模块

自己定义模块：需导入，无需npm下载安装
第三方模块（npm上）：需下载安装和导入

模块引入注意事项

• 系统模块（内置模块）无需加路径，例如：require("fs")
• 自定义模块有2种情况

1、npm安装的第三方模块，无需加路径，例如：require("axios")
2、自己定义的模块，需要加路径，否则系统会在node_modules目录下找

1. 如果有路径，就会到路径中找模块文件，找不到直接报错
2. 如果没有路径，就会到当前项目中的node_modules目录中找
3. 如果第2种情况找不到，就会到node的全局node_modules目录中找，找不到就报错

exports与module.exports区别

1. exports是module.exports的引用
2. node中，一个文件就是一个模块，模块真正导出的是module.exports
3. 每次导出都要这样写：module.exports.xxx = xxx，特别麻烦，为了方便，就出现一个exports的引用，写法上exports.xxx = xxx等价之前的
4. 如果模块只导出一个成员，必须只能使用module.exports = xxx
5. 千万不能这样写：exports = xxx，这样会导致exports不再指向module.exports
6. 如果模块导出多个成员，可以使用如下2种写法

1、module.exports.xxx = xxx
2、exports.xxx = xxx