跳转至

status:new

JavaScript

894 个字 44 行代码 预计阅读时间 4 分钟

State of JavaScript 2024

Nodejs

一个 JavaScript 运行时环境,基于 Chrome V8 引擎。

让你可以在浏览器外(如服务器端)运行 JavaScript

作用类似于:

  • Python 的解释器 python
  • Java 的虚拟机 java

没有 Node.js,就不能直接在命令行运行 .js 程序。

安装

Node.js — Download Node.js®

使用这个网站上面的安装的指令

windows 安装 npm 教程 _npm 安装 -CSDN 博客

Node.js — Run JavaScript Everywhere

安装以后可以把 nodejs 的本地仓库从 c 盘移出来

npm config set prefix "<path>\nodejs\node_global"
npm config set cache "<path>\nodejs\node_cache"

卸载

sudo npm uninstall npm -g
cd /usr/local/lib/node_modules/

rm -rf npm
sudo apt-get remove nodejs
sudo apt-get remove npm
sudo apt-get remove node
node -v
npm -v 

NPM - 包管理器

npm (Node Package Manager)

Node.js 自带的包管理工具。用来下载、安装和管理 JavaScript / 框架。

类似于:

  • Python pip
  • Java maven/gradle
检查版本
node -v   # 查看 Node.js 版本
npm -v    # 查看 npm 版本
初始化项目
npm init

它会一步一步问你项目名、版本号、作者等。 如果只想快速生成默认配置:

npm init -y

会生成一个 package.json 文件,记录项目信息和依赖。

npm install 包名
npm i 包名

会把包写进 node_modules/,同时在 package.jsondependencies 里记录。

全局安装
npm install -g 包名
只在开发环境需要
npm install 包名 --save-dev

缩写:

npm i 包名 -D

写入 devDependencies,比如测试框架 jest、打包工具 webpack

npm uninstall 包名

缩写:

npm un 包名

查看已安装的依赖
npm list
更新依赖
npm update 包名
清除缓存
npm cache clean --force
升级 npm
npm install -g npm

NVM

nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" --no-use # This loads nvm, without auto-using the default version
验证
nvm -vx

下载

使用 NVM 进行管理

nvm install stable

更换版本

nvm install 22
nvm use 22

Vue

cmd 验证安装
npm -v
npm info vue
配置镜像站点
npm config set registry=http://registry.npm.taobao.org 
npm install vue -g
npm install vue-router -g
创建 vue 工程
vue init webpack vue01
cd vue01
npm install
npm run dev

npm run build

成功界面,提示打开地址 http://localhost:8080

JavaScript 全生态整理

核心语言 & 规范

工具 / 功能 GitHub 链接
ECMAScript JavaScript 标准规范 tc39/ecma262
Babel JS 转译器(ES6+ → ES5) babel/babel
TypeScript JS 静态类型超集 microsoft/TypeScript

运行环境

工具 功能 GitHub 链接
Node.js JS 服务器端运行环境 nodejs/node
Deno 安全 JS/TS runtime denoland/deno
Bun 高性能 JS/TS runtime & bundler oven-sh/bun

前端框架 / UI 框架

工具 功能 GitHub 链接
React UI facebook/react
Vue.js 渐进式框架 vuejs/vue
Angular 全功能框架 angular/angular
Svelte 编译型 UI 框架 sveltejs/svelte
Solid.js 高性能响应式框架 solidjs/solid
Next.js React SSR/SSG/Fullstack vercel/next.js
Nuxt.js Vue SSR/Fullstack nuxt/nuxt
Remix React 全栈框架 remix-run/remix
Astro 多框架静态站点生成器 withastro/astro
SvelteKit Svelte 全栈框架 sveltejs/kit

后端框架

工具 功能 GitHub 链接
Express.js 轻量 Web 框架 expressjs/express
Koa 极简 Web 框架 koajs/koa
NestJS TypeScript 后端框架 nestjs/nest
Fastify 高性能 Node 框架 fastify/fastify

状态管理

工具 功能 GitHub 链接
Redux Toolkit Redux 官方最佳实践 reduxjs/redux-toolkit
Zustand 轻量状态管理 pmndrs/zustand
MobX 响应式状态管理 mobxjs/mobx
Recoil React 状态管理 facebookexperimental/Recoil
React Query / TanStack Query 数据获取 & 缓存 TanStack/query
Jotai 原子化状态管理 pmndrs/jotai

构建 / 打包

工具 功能 GitHub 链接
Webpack 模块打包器 webpack/webpack
Rollup ES 模块打包 rollup/rollup
Parcel 零配置打包 parcel-bundler/parcel
Vite 极速开发 + 构建 vitejs/vite
esbuild 极快打包 & 转译 evanw/esbuild
Turbopack Next.js 官方 bundler vercel/turbopack
Snowpack 构建 & dev server snowpackjs/snowpack

包管理

工具 功能 GitHub 链接
npm 官方包管理器 npm/cli
Yarn Facebook 包管理器 yarnpkg/yarn
pnpm 高性能包管理器 pnpm/pnpm

测试

工具 功能 GitHub 链接
Jest 单元测试 facebook/jest
Mocha 测试框架 mochajs/mocha
Chai 断言库 chaijs/chai
Vitest Vite 集成测试 vitest-dev/vitest
Cypress E2E 测试 cypress-io/cypress
Playwright E2E 自动化 microsoft/playwright

Lint / 代码格式化 / 新一代工具

工具 功能 GitHub 链接
ESLint JS/TS 静态分析 eslint/eslint
Prettier 代码格式化 prettier/prettier
Biome 一体化 Linter & Formatter & BundlerESLint + Prettier 替代) biomejs/biome
Rome 一体化工具链 rome/tools
SWC 高性能 JS/TS 编译器 swc-project/swc

UI / 组件库

工具 功能 GitHub 链接
Material-UI (MUI) React 组件库 mui/material-ui
Ant Design UI 组件库 ant-design/ant-design
Chakra UI React UI 框架 chakra-ui/chakra-ui
Tailwind CSS 原子化 CSS tailwindlabs/tailwindcss
Headless UI 无样式 UI 组件 tailwindlabs/headlessui
Storybook UI 组件文档 storybook/storybook

数据库 & ORM

工具 功能 GitHub 链接
Sequelize Node ORM sequelize/sequelize
Prisma ORM & 类型安全 prisma/prisma
TypeORM ORM 框架 typeorm/typeorm
Objection.js ORM Vincit/objection.js
Mongoose MongoDB ODM Automattic/mongoose

工具链 / DevOps

工具 功能 GitHub 链接
Husky git hook 管理 typicode/husky
Lerna monorepo 管理 lerna/lerna
Nx monorepo 工具 nrwl/nx
Turborepo 高性能 monorepo 构建 vercel/turbo