跳至主要內容

前端依赖环境

王金城大约 8 分钟

Window 开发环境安装

安装 nodejs

在 nodejs 官网下载最新的 LTS（长期维护版）版本 https://nodejs.org/zh-cn/，一直选下一步进行安装即可

提示

如果您在使用 PowerShell 的话，当执行 npm 命令时可能会报错 此系统禁止运行脚本 ，这时需要修改 PowerShell 执行策略，需要使用管理员运行 PowerShell 后执行以下命令：

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

添加 nodejs 环境变量

根据自己的操作系统来配置环境变量。

  • Windows 系统：

    • 打开 控制面板 -> 系统和安全 -> 系统 -> 高级系统设置
    • 选择 环境变量

--max-old-space-size

设置 V8 旧内存部分的最大内存大小。 随着内存消耗接近极限，V8 会花更多的时间在垃圾回收上，以释放未使用的内存。 在具有 2 GiB 内存的机器上，考虑将其设置为 1536 (1.5 GiB) 以留出一些内存用于其他用途并避免交换。

在 系统变量 中 新建 NODE_OPTIONS 变量，并设置其值为 --max-old-space-size=8192

可以使用以下命令查看是否设置成功：

node -e 'console.log(v8.getHeapStatistics().heap_size_limit/1024/1024)'

如果内存不够可能会报以下错误：

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

提示

  1. 如果你使用的是 VSCode 的内置终端，那么配置环境变量后是没有用的，需要独立配置。
  2. 如果你使用的 WebStorm 的内置终端，那么你很幸运，你不需要重启系统，只需要重启 WebStorm 即可。
  3. 如果你使用的是系统自带的终端，那么重启终端即可。

VSCode 的内置终端环境变量配置需要在 settings.json 中加入以下配置：

"terminal.integrated.env.windows": {
  "NODE_OPTIONS": "--max-old-space-size=8192"
}

修改 npm 的配置

查看配置

npm config ls

修改全局包下载存放位置，并将 D:\Users\jcwang\AppData\Roaming\npm 配置到环境变量的 Path 中

npm config set prefix "D:\Users\jcwang\AppData\Roaming\npm"

修改 node 缓存的位置

npm config set cache "D:\Users\jcwang\AppData\Roaming\npmCache"

修改 npm 镜像，使用 公司公网私服

# 公司公网私服（使用这配置）
npm config set registry https://www.bisy.com.cn/repository/npm-group/
# 国内镜像地址（备用，无需执行）
npm config set registry https://registry.npmmirror.com
# 公司内网私服映射（备用，无需执行）
npm config set registry http://172.28.168.186:8081/repository/npm-group/

使用公网私服镜像，可能出现配置镜像失败的问题，如：虽然配置的域名，但是执行 npm info express 后发现 .tarball 为私网地址 172.28.168.186:8081，可执行以下命令清除缓存

npm cache clean --force

安装 pnpm 并进行相关配置

通过 npm 安装

npm install -g pnpm

修改存储路径

pnpm config set store-dir D:\Users\jcwang\AppData\Roaming\pnpm-store

修改缓存路径

pnpm config set cache-dir D:\Users\jcwang\AppData\Roaming\pnpm-cache

修改全局安装包的 bin 文件的目标目录，并将 D:\Users\jcwang\AppData\Roaming\pnpm 配置到环境变量的 Path 中

pnpm config set global-bin-dir D:\Users\jcwang\AppData\Roaming\pnpm

指定用于存储全局包的目录

pnpm config set global-dir D:\Users\jcwang\AppData\Roaming\pnpm\global

解决 Windows 系统长路径问题

Windows 的本地路径长度限制为 MAX_PATH=260 个字符，如果文件路径超过该最大长度，将导致使用问题。在前端这个诡异的生态系统中超过 260 个字符简直太常见了。

有三种方式可以解决这个问题：

  1. 把项目的目录创建的尽可能的浅一些，这样可以减少路径长度（目前推荐这种方式）。
  2. 使用 pnpm 的配置项 virtual-store-dir 来解决问题（每个项目都要独立配置）。
  3. 如果你是 Windows 10 版本 1607 及更高版本，那么可以通过修改注册表或组策略的方式修改最大路径长度限制 来解决问题（目前 pnpm 不支持这个配置）。
    • 使用 Win + R 打开运行，输入 gpedit.msc 打开本地组策略。
    • 打开 计算机配置 | 管理模板 | 系统 | 文件系统 | 启用 win32 长路径，将 启用 win32 长路径 设置为 已启用。
    • 最后重启计算机即可。

IDE 对比与推荐

这里不强制要求使用哪种编辑器，主要看自己的使用习惯。我主要体验了 WebStorm 和 VS Code 两种编辑器，可以说是各有千秋。 我在 VS Code 编辑器的配置上也花费了不少的时间，已经将配置整合到项目中，推荐使用 VS Code 来进行开发前端项目。

提示

这里建议开启保存时格式化代码，解放双手，也可以防止忘记执行格式化操作。

WebStorm：文件 | 设置 | 工具 | 保存时的操作 | 运行 Prettier

VSCode：已包含在 settings.json 配置文件中，无需重复配置。

功能比较

功能WebStormVS Code
完全免费❌✔️
设置云同步✔️ 仅订阅用户可用✔️
开箱即用✔️❌
智能提示✔️❌
i18n Ally✔️ 部分情况无法显示文字✔️
导入提示✔️✔️ 部分情况下会失效
版本管理✔️✔️ 对 SVN 的支持较差

VS Code

您可以使用 VS Code 进行开发工作，项目中也内置了推荐安装的插件，在 .vscode 目录下。

优缺点对比：

优点缺点
完全免费需要繁琐的配置才能使用
设置云同步没有智能提示功能
i18n Ally 插件功能完善导入提示不够完善
外观好看一些，图标主题丰富对 SVN 的支持较差

WebStorm

您也可以使用 WebStorm 进行开发工作，他比 VS Code 更加智能，且对于用惯了 IDEA 的开发者来说几乎是 0 学习成本。

优缺点对比：

优点缺点
拥有智能提示功能，可大大增加开发效率付费软件，且还比较贵
设置云同步（如果是订阅用户）无设置云同步（非订阅用户）
开箱即用，几乎不用修改配置i18n Ally 插件功能有瑕疵，部分情况下无法显示文本
对 SVN 的支持非常好要使用最新版本开发，否则对前端支持不佳

IDE 配置与优化

VSCode 开启 Volar Takeover 模式

注意

Volar Takeover 模式 仅适用于 Volar 插件 2.0 以下版本，2.0 以上版本已经无需这样配置，并且也弃用了 TypeScript Vue Plugin (Volar) 插件。 详见 CHANGELOG

可以说 VSCode + Volar + TS 真的是经常的卡顿，为了优化性能，Volar 提供了一个叫做 Takeover 模式 的功能。 在这个模式下，Volar 能够使用一个 TS 语言服务实例同时为 Vue 和 TS 文件提供支持。

要开启 Takeover 模式，你需要执行以下步骤来在你的项目的工作空间中禁用 VSCode 的内置 TS 语言服务：

  1. 在当前项目的工作空间下，用 Ctrl + Shift + P (macOS：Cmd + Shift + P) 唤起命令面板。
  2. 输入 built，然后选择”Extensions：Show Built-in Extensions”。
  3. 在插件搜索框内输入 typescript (不要删除 @builtin 前缀)。
  4. 点击“TypeScript and JavaScript Language Features”右下角的小齿轮，然后选择“Disable (Workspace)”。
  5. 重新加载工作空间。Takeover 模式将会在你打开一个 Vue 或者 TS 文件时自动启用。

Volar Takeover 模式

使用 Prettier

在 VS Code 中 打开扩展面板，在搜索框输入 @recommended 安装全部扩展即可，因为在 .vscode/settings.json 文件中已经完成了相关配置。

在 WebStorm 中 需要依次打开 文件 | 设置 | 语言和框架 | JavaScript | Prettier，选择 自动 Prettier 配置，并勾选 保存时运行。

开发常用命令

安装项目所有依赖

pnpm install

启动项目

pnpm dev

启动项目中的文档模块

pnpm docs:dev

安装新的软件包

安装软件包及其依赖的任何软件包。 默认情况下，任何新软件包都安装为生产依赖项。

pnpm add <pkg>

摘要：

CommandMeaning
pnpm add sax保存到 dependencies
pnpm add -D sax保存到 devDependencies
pnpm add -O sax保存到 optionalDependencies
pnpm add -g saxInstall package globally
pnpm add sax@next从 next 标签下安装
pnpm add sax@3.0.0安装指定版本 3.0.0

更新软件包版本

在不带参数的情况下使用时，将更新所有依赖关系。

pnpm update

摘要：

CommandMeaning
pnpm up遵循 package.json 指定的范围更新所有的依赖项
pnpm up --latest更新所有依赖项，此操作会忽略 package.json 指定的范围
pnpm up foo@2将 foo 更新到 v2 上的最新版本
pnpm up "@babel/\*"更新 @babel 范围内的所有依赖项

删除软件包

别名: rm, uninstall, un

从 node_modules 和项目的 package.json 中删除相关 packages。

pnpm remove

配置项

--recursive, -r

当在 工作区 中使用此命令时，将从每个工作区的包中移除相关依赖(或 多个依赖)。

当不在工作区内使用时，将删除相关依赖项 (或多个依赖), 也包含子目录中对应的包 。

--global, -g

从全局删除一个依赖包。

--save-dev, -D

仅删除开发环境 devDependencies 中的依赖项。

--save-optional, -O

仅移除 optionalDependencies 中的依赖项。

--save-prod, -P

仅从 dependencies 中删除相关依赖项。

--filter <package_selector>

访问前端页面

由于为了解决跨域问题，我们已经使用 Nginx 做了代理，所以我们访问的项目地址为 http://localhost/basic-paper-cloud/