初识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版本
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
利用yrm去换源
yrm use 源名
其实这个华为源yrm并没有,这是我自己添加进去的
添加指定源到yrm中
yrm add huawei https://mirrors.huaweicloud.com/repository/npm/
你可以把你认为好用的源都这样添加到yrm中去,以后切换会很方便,以后安装项目装包的时候就可以很方便去换源了
有些公司是自己的源,只不过没有开源出来,这个时候你就可以自己添加到yrm中了
windows实现切换node版本
-
清空本地缓存
npm cache clean --force
- 去控制面板卸载node.js
- 安装nvm管理工具Releases · coreybutler/nvm-windows (github.com)
后一路默认路径安装
-
检查是否安装成功
nvm v // 管理员身份打开终端
-
安装node
查看可用版本node
nvm list available
安装指定版本node
nvm install node版本号
- 使用指定版本node
nvm use 18.15.0 // 管理员身份打开终端
-
查看当前node版本
node -v
-
查看安装的所有版本node
nvm list
-
删除指定版本node
nvm uninstall node版本号
另外,当你安装依赖的时候,如果报了下面这个错误
可能是因为npm的旧缓存导致npm解析出错,因此可以尝试下面的指令清除缓存再去npm i
npm cache clean --force
node运行方法
解析器运行
在终端中输入node
,就可以进入运行环境,类似浏览器的控制台
这就是REPL(Read Eval Print Loop)环境
写多行代码需输入.editor
指定脚本运行
就是平时最常用的手段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
去运行。
他甚至还会告诉你运行时间!
使用vscode中运行调试
运行文件
断点调试
你可以使用vscode去给你的js文件打断点,把鼠标移到每行代码左边,可以看到一个红点,点击一下,就可以暂停v8的运行,到此为止
简单做一个示范
目前已经运行到17行了,当然17行还没运行,现在接着点击下一步,点击向下的箭头
你也可以展开变量查看变量一步一步的变化
你也可以用JavaScript终端调试
npm运行js文件
在当前文件夹中新建一个package.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设计之初仅仅是个脚本,一周打造好的语言并没有模块化这个概念,当时想要实现模块化这个效果是用的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看文档
输入指令
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…
转载自:https://juejin.cn/post/7321540587852546082