status:new¶
JavaScript¶
约 894 个字 44 行代码 预计阅读时间 4 分钟
Nodejs¶
一个 JavaScript 运行时环境,基于 Chrome V8 引擎。
让你可以在浏览器外(如服务器端)运行 JavaScript。
作用类似于:
- Python 的解释器 python
- Java 的虚拟机 java
没有 Node.js,就不能直接在命令行运行 .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.json 的 dependencies 里记录。
全局安装
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 & Bundler(ESLint + 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 |