前端构建_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

卸载旧版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   // 卸载全局软件包
npm uninstall      // 从node_modules目录中移除一个包
npm uninstall --save      // 从package.json的dependencies中移除一个包。
npm uninstall --save-dev       // 从package.json的devDependencies中移除一个包。

你可能感兴趣的