前端构建_Nodejs

2024年2月13日 198次阅读 来源: 104828720

前端模块化

  • 主要解决的问题
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 <package>  // 卸载全局软件包
npm uninstall <package>     // 从node_modules目录中移除一个包
npm uninstall --save <package>     // 从package.json的dependencies中移除一个包。
npm uninstall --save-dev <package>      // 从package.json的devDependencies中移除一个包。
    原文作者：104828720
    原文地址: https://segmentfault.com/a/1190000017553504
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞