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

node是为js打造的,它赋予了js后端的能力。node有好几个框架,就像是js有vue,react框架一样,node框架有nest,koa。next是react框架,nust是vue框架。nest是node企业级框架,而koa适合小型项目。
node也是v8的运行环境,node也有event-loop,不过不同于浏览器,以后会详聊

一些小知识

查看当前node版本

arduino 复制代码
console.log(porcess.version) 

查看当前npm版本

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

npm -v

查看npm源

arduino 复制代码
npm config get registry

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

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

安装yrm

css 复制代码
npm i -g yrm --registry=https://registry.npmmirror.com

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

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

bash 复制代码
yrm ls

利用yrm去换源

perl 复制代码
yrm use 源名

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

添加指定源到yrm中

csharp 复制代码
yrm add huawei https://mirrors.huaweicloud.com/repository/npm/

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

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

windows实现切换node版本

  1. 清空本地缓存

    css 复制代码
    npm cache clean --force
  1. 去控制面板卸载node.js
  2. 安装nvm管理工具Releases · coreybutler/nvm-windows (github.com)

后一路默认路径安装

  1. 检查是否安装成功

    arduino 复制代码
    nvm v // 管理员身份打开终端
  1. 安装node

    查看可用版本node

    arduino 复制代码
    nvm list available

安装指定版本node

nvm install node版本号
  1. 使用指定版本node
rust 复制代码
nvm use 18.15.0  // 管理员身份打开终端
  1. 查看当前node版本

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

    nvm list
    
  1. 删除指定版本node

    nvm uninstall node版本号
    

node运行方法

解析器运行

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

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

写多行代码需输入.editor

指定脚本运行

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

#!/usr/bin/env node

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

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

javascript 复制代码
#! /usr/bin/env node   
// #!注释是给系统看的

输入下面的指令

bash 复制代码
chmod u+x ./index.js

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

Code Runner插件

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

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

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

断点调试

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

简单做一个示范

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

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

你也可以用JavaScript终端调试

npm运行js文件

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

json 复制代码
{
    "scripts": {
        "dev": "node index2.js"
    }
}

之后就可以npm run dev运行了

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

模块化

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

我们现在运行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用到了模块化,否则浏览器还是不承认模块化语法

xml 复制代码
<script src="./main.js" type="module"></script>

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

默认导出export default

add导出

javascript 复制代码
function add(a, b) {
    return a + b
}

export default add

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

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

sql 复制代码
import add from './add.js'

console.log(add(1, 2))

直接导出export

add导出

css 复制代码
export function add(a, b) {
    return a + b
}

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

sql 复制代码
import { add } from './add.js'

console.log(add(1, 2)) 

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

csharp 复制代码
import { add, minus } from './utils.js'

当然,你也可以写成这样

csharp 复制代码
import * as utils from './add.js'

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

node CommonJS

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

同样有两种方法抛出

module.exports

add导出

css 复制代码
function add(a, b) {
    return a + b
}

module.exports = {
    add
}

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

csharp 复制代码
const { add } = require('./add.js') 

console.log(add(1, 2))

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

css 复制代码
function add(a, b) {
    return a + b
}

module.exports = add

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

csharp 复制代码
const add = require('./add.js')  

console.log(add(1, 2))

exports

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

css 复制代码
exports.minus = function (a, b) {
    return a - b
}

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

javascript 复制代码
const obj = require('./minus.js')

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

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

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

不过需要配置一下package.json

json 复制代码
{
    "type": "module"  
}

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

将ESModule转换成CommonJS进行统一

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

需要先安装一个小插件

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

www.npmjs.com/package/tsu...

输入指令

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

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

bash 复制代码
tsup ./index.js

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

当然记得提前安装好typescript

scss 复制代码
npm install -g typescript  // 安装
tsc --version // 查看安装是否成功

最后

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

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

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

相关推荐
Sam90292 分钟前
【Webpack--013】SourceMap源码映射设置
前端·webpack·node.js
Jinuss21 分钟前
npm的作用域介绍
npm·node.js
Python私教1 小时前
Go语言现代web开发15 Mutex 互斥锁
开发语言·前端·golang
A阳俊yi1 小时前
Vue(13)——router-link
前端·javascript·vue.js
小明说Java1 小时前
Vue3祖孙组件通信探秘:运用provide与inject实现跨层级数据传递
前端
读心悦1 小时前
node.js 版本管理
node.js
好看资源平台1 小时前
前端框架对比与选择:如何在现代Web开发中做出最佳决策
前端·前端框架
4triumph1 小时前
Vue.js教程笔记
前端·vue.js
程序员大金1 小时前
基于SSM+Vue+MySQL的酒店管理系统
前端·vue.js·后端·mysql·spring·tomcat·mybatis
清灵xmf1 小时前
提前解锁 Vue 3.5 的新特性
前端·javascript·vue.js·vue3.5