likes
comments
collection
share

初识node | 模块化 | yrm换源 | nvm切换node

作者站长头像
站长
· 阅读数 9

node是为js打造的,它赋予了js后端的能力。node有好几个框架,就像是js有vue,react框架一样,node框架有nest,koa。next是react框架,nust是vue框架。nest是node企业级框架,而koa适合小型项目。

node也是v8的运行环境,node也有event-loop,不过不同于浏览器,以后会详聊

一些小知识

查看当前node版本

console.log(porcess.version) 

查看当前npm版本

npm(Node Package Manager)是node的包管理工具,安装node时就会安装npm。npm就是用于安装,管理,卸载各种第三方的包和模块

npm -v

查看npm源

npm config get registry

有时候安装ai框架的时候,发现当前的源不行就可以去换源

同样,这里你可以去安装一个yrm管理工具,方便你去换源,这样就不要去到处找了,yrm里面有全球热门的源,当然不全,不过你可自行添加

安装yrm

npm i -g yrm --registry=https://registry.npmmirror.com

yrm(Yarn Registry Manager),方便你去管理源的工具

查看目前全球热门的可用源

yrm ls

初识node | 模块化 | yrm换源 | nvm切换node

利用yrm去换源

yrm use 源名

初识node | 模块化 | yrm换源 | nvm切换node

其实这个华为源yrm并没有,这是我自己添加进去的

添加指定源到yrm中

yrm add huawei https://mirrors.huaweicloud.com/repository/npm/

你可以把你认为好用的源都这样添加到yrm中去,以后切换会很方便,以后安装项目装包的时候就可以很方便去换源了

有些公司是自己的源,只不过没有开源出来,这个时候你就可以自己添加到yrm中了

windows实现切换node版本

  1. 清空本地缓存

    npm cache clean --force
    

初识node | 模块化 | yrm换源 | nvm切换node

  1. 去控制面板卸载node.js
  2. 安装nvm管理工具Releases · coreybutler/nvm-windows (github.com)

初识node | 模块化 | yrm换源 | nvm切换node

后一路默认路径安装

  1. 检查是否安装成功

    nvm v // 管理员身份打开终端
    

初识node | 模块化 | yrm换源 | nvm切换node

  1. 安装node

    查看可用版本node

    nvm list available
    

初识node | 模块化 | yrm换源 | nvm切换node

安装指定版本node

nvm install node版本号

初识node | 模块化 | yrm换源 | nvm切换node

  1. 使用指定版本node
nvm use 18.15.0  // 管理员身份打开终端

初识node | 模块化 | yrm换源 | nvm切换node

  1. 查看当前node版本

    node -v  
    

初识node | 模块化 | yrm换源 | nvm切换node

  1. 查看安装的所有版本node

    nvm list
    

初识node | 模块化 | yrm换源 | nvm切换node

  1. 删除指定版本node

    nvm uninstall node版本号
    

另外,当你安装依赖的时候,如果报了下面这个错误

初识node | 模块化 | yrm换源 | nvm切换node

可能是因为npm的旧缓存导致npm解析出错,因此可以尝试下面的指令清除缓存再去npm i

npm cache clean --force

node运行方法

解析器运行

在终端中输入node,就可以进入运行环境,类似浏览器的控制台

这就是REPL(Read Eval Print Loop)环境

初识node | 模块化 | yrm换源 | nvm切换node

写多行代码需输入.editor

初识node | 模块化 | yrm换源 | nvm切换node

指定脚本运行

就是平时最常用的手段node index.js

#!/usr/bin/env node

这个可以指明运行该文件的环境是node还是python,最好是Mac系统用这个

比如你在index.js文件中开头输入

#! /usr/bin/env node   
// #!注释是给系统看的

输入下面的指令

chmod u+x ./index.js

之后可以直接输入./index.js运行了

Code Runner插件

你也可以安装一个vscode插件,安装这个插件之后你可以点击屏幕右上角的播放直接运行当前的文件,也可也右键点击Run Code去运行。

他甚至还会告诉你运行时间!

初识node | 模块化 | yrm换源 | nvm切换node

使用vscode中运行调试运行文件

初识node | 模块化 | yrm换源 | nvm切换node

断点调试

你可以使用vscode去给你的js文件打断点,把鼠标移到每行代码左边,可以看到一个红点,点击一下,就可以暂停v8的运行,到此为止

简单做一个示范

初识node | 模块化 | yrm换源 | nvm切换node

目前已经运行到17行了,当然17行还没运行,现在接着点击下一步,点击向下的箭头

初识node | 模块化 | yrm换源 | nvm切换node

你也可以展开变量查看变量一步一步的变化

初识node | 模块化 | yrm换源 | nvm切换node

你也可以用JavaScript终端调试

初识node | 模块化 | yrm换源 | nvm切换node

npm运行js文件

在当前文件夹中新建一个package.json文件,进行如下配置

{
    "scripts": {
        "dev": "node index2.js"
    }
}

之后就可以npm run dev运行了

初识node | 模块化 | yrm换源 | nvm切换node

这个时候你肯定就要说了,这不是我们天天用得脚手架吗!没错!vite,cli脚手架都是用node打造出来的,后面还有一些交互是node的内置模块实现的

模块化

说起模块化你肯定首先想到的是es6新推的js模块化语法,但是es6也是15年才出的,以前js是没有模块化这个功能的,所谓模块化就是指的是,js文件分出去写,可以实现导入到一个js文件中。但是15年之前的js没有这个功能,也就是说window浏览器无法进行模块化,所有的js只能写在一个文件中。

js设计之初仅仅是个脚本,一周打造好的语言并没有模块化这个概念,当时想要实现模块化这个效果是用的script来引入的,比如下面这个代码,从上往下加载这些js文件,也就是早期js可以这样写,因为项目不会很大,产生的阻塞也就那样,当然,你可以在script里面加一个defer,这样不会阻塞,引入css也天生不会,后面因为后面的前端项目很大,不可能容忍这个阻塞,因此诞生了CommonJS,那为何现在如今又搞个ESModule出来,这是因为vue/react出来了导致CommonJS无法满足前端模块化复杂的需求

<script src="./a.js"></script> 
<script src="./b.js"></script> 
<script src="./c.js"></script>

我们现在运行js,要么用得浏览器也就是window,要么就是node,这两个环境都有模块化语法,我们必须搞清楚二者的区别。

es6模块化遵从的标准是ECMAScript的ESModule。但是node是推出时间是09年,比es6早,es6之前也就是15年之前,js无法模块化一直是个诟病,因此node诞生之初就弥补了js无法模块化这个缺陷,所以它遵循的标准不是ESModule,而是CommonJS。es6因为太火爆了,node也很气,为何不用我的CommonJS,最后为了迎合大众,也可以兼容ESModule了,不过需要配置一下。最后大家写的node,有些人是CommonJS有些人是ESModule,有个方法可以将ESModule转换成CommonJS

浏览器window ESModule

现在实现一个demo,两个js,main.js想要调用add.js的函数add,然后导入到html中,去浏览器输出

首先是html文件需要导入js,这里一定要指明这个js用到了模块化,否则浏览器还是不承认模块化语法

<script src="./main.js" type="module"></script>

add.js需要导出,可以选择默认导出,也可以直接导出

默认导出export default

add导出

function add(a, b) {
    return a + b
}

export default add

如果用了默认导出,导入就不需要{ }

默认导出对应的导入,main.js导入

import add from './add.js'

console.log(add(1, 2))

直接导出export

add导出

export function add(a, b) {
    return a + b
}

直接导出对应的导入需要用{ }, main.js导入

import { add } from './add.js'

console.log(add(1, 2)) 

这两种方法都可以,直接导出会更方便,当你导入多个方法属性的时候,你可以这样写(假设utills.js里面还有minus函数)

import { add, minus } from './utils.js'

当然,你也可以写成这样

import * as utils from './add.js'

// 调用时如下
utils.add(1, 2)
utils.minus(1, 2)

node CommonJS

同样上面的demo,采用node模块化就是下面这样

同样有两种方法抛出

module.exports

add导出

function add(a, b) {
    return a + b
}

module.exports = {
    add
}

index.js导入:因为导出是对象的形式,导入必须进行解构

const { add } = require('./add.js') 

console.log(add(1, 2))

当然你还可以直接导出,不以对象的形式 ,add导出

function add(a, b) {
    return a + b
}

module.exports = add

index.js导入就不需要解构了

const add = require('./add.js')  

console.log(add(1, 2))

exports

exports抛出的一定是个对象,minus抛出时挂载一个属性

exports.minus = function (a, b) {
    return a - b
}

index.js导入,调用的是人家抛出的对象的属性

const obj = require('./minus.js')

console.log(obj.minus(1, 2))

node的两种模块化方式,module.exports抛出的可以是对象,也可以不是,而exports抛出的一定是对象

node被逼无奈也遵从es6的ESModule规范

不过需要配置一下package.json

{
    "type": "module"  
}

这样,你就可以用es6的写法了

将ESModule转换成CommonJS进行统一

喜欢原因,一个项目有些人用得CommonJS有些人用到的ESModule。合并代码会报错,因此需要进行统一

需要先安装一个小插件

来到npmjs官网中搜索tsup看文档

www.npmjs.com/package/tsu…

输入指令

npm i -g tsup  // -g就是全局安装,任意路径下终端

然后针对index.js,将其转成CommonJS

tsup ./index.js

这个时候,路径下会生成一个dist文件夹,里面有一个index.cjs.cjs就是CommonJS规范

当然记得提前安装好typescript

npm install -g typescript  // 安装
tsc --version // 查看安装是否成功

其实还有个方法,不需要去配置,js文件直接写mjs文件,这样用node写ESModule也是支持的

最后

本期文章主要介绍了node,以及一些你需要清楚的准备工作,重点介绍了两种模块化。后面还会继续聊node,尤其是node的内置模块

另外有不懂之处欢迎在评论区留言,如果觉得文章对你学习有所帮助,还请”点赞+评论+收藏“一键三连,感谢支持!

本次学习代码已上传至本人GitHub学习仓库:github.com/DolphinFeng…