1、查看、删除全局安装包

  • 查看全局安装\缓存路径：
    • npm：npm config get prefix、npm config get cache
    • yarn：yarn global dir、yarn cache dir
  • 更改全局安装路径：
    • npm：npm config set prefix "D:\nodejs\npm_global"
    • yarn：yarn config set global-folder "D:\yarn\global"
  • 查看全局安装包
    • npm（Node包管理器）：npm list -g --depth 0
    • yarn：yarn global list

  • 删除

    1. npm uninstall -g vue-cli
    2. yarn global remove vue-cli

    2、临时执行工具包

  • npx（Node包执行器）：npx create-react-app my-app

  • yarn dlx(yarn 2 download execte)：yarn dlx create-react-app my-app --template typescript

    首先：查看当前项目有没 create-react-app 其次：当前项目找不到，会去全局查找 create-react-app 最好：全局找不到，则临时从 npm 包仓库安装 create-react-app，执行后删除该工具包

3、PowerShell脚本禁用解决

  • 以管理员权限打开 PowerShell
  • 获取执行策略列表：Get-ExecutionPolicy -List
  • 对于当前用户使用 RemoteSigned 执行策略：

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

  • 对于本机使用 RemoteSigned 执行策略 ：

Set-ExecutionPolicy RemoteSigned -Scope LocalMachine

4、安装 Yarn 2

  • npm i -g yarn：全局安装yarn
  • yarn set version berry：若设置失败，参考https://www.cnblogs.com/kharvey/p/13741519.html

  • 添加.gitignore

    1. .yarn/*
    2. !.yarn/patches
    3. !.yarn/releases
    4. !.yarn/plugins
    5. !.yarn/sdks
    6. !.yarn/versions
    7. .pnp.*

  • 配置.yarnrc.yml

    1. #nodeLinker: "pnp"
    2. nodeLinker: "node-modules"
    3. npmRegistryServer: "https://registry.npm.taobao.org"

  • yarn plugin import typescript ：自动引入包的类型

  • yarn install 安装最新包
  • yarn start

5、解决eslint 插件保存时自动fix hooks依赖的问题

该问题github地址。安装最新的 eslint-plugin-react-hooks，配置 .eslintrc 文件

  1. {
  2.   "plugins": [
  3.     // ...
  4.     "react-hooks"
  5.   ],
  6.   "rules": {
  7.     // ...
  8.     "react-hooks/rules-of-hooks": "error",
  9.     "react-hooks/exhaustive-deps": "warn"
  10.   }
  11. }

6、fetch 获取本地json文件问题

前端本地的 data.json文件，通过请求获取，首先看下最新的统一资源定位符(URL)与路径(path)快速入门，其次 public 文件夹一般位于 React 应用程序的根文件夹中，使用 fetch 时，React 通常会读取 public 文件夹中的资产/资源文件。所以将 data.json数据放在相对 index.html 的目录下，即可访问

  1. // way 1
  2. fetch('./data.json').then(response => {
  3.   return response.json();
  4. }).then(data => {
  5.   // Work with JSON data here
  6.   console.log(data);
  7. }).catch(err => {
  8.   // Do something for an error here
  9. });
  11. // way 2
  12. fetch('data.json').then(response => {
  13.   return response.json();
  14. }).then(data => {
  15.   // Work with JSON data here
  16.   console.log(data);
  17. }).catch(err => {
  18.   // Do s

7、Yarn 设置代理、源

  • 查看代理与源

    1. yarn config list
    2. npm config list -l

  • 设置代理

    1. yarn config set proxy  http://username:password@server:port
    2. yarn confit set https-proxy http://username:password@server:port

  • 删除代理

    1. yarn config delete proxy
    2. yarn config delete https-proxy

  • yrm 工具查看当前可用所有源

    1. npx yrm ls

  • 切换源

    • 手动切换

      1. yarn config set registry https://registry.npm.taobao.org
      2. yarn config set registry https://registry.yarnpkg.com
      3. yarn config set registry https://registry.npmjs.org/

    • yrm工具切换(切换前可测试：npx yrm test taobao；npx yrm test yarn)

      1. npx yrm use taobao  
      2. npx yrm use yarn  
      3. npx yrm use yarn

      8、TypeScript 语言服务在其启动后已中止 5 次。将不会重启该服务。

      可能是安装的typescript有问题，在setting.json中添加

      1. "typescript.tsdk": "node_modules/typescript/lib"

      参考

  • The TypeScript language service died 5 times right after it got started. The service will not be restarted.

9、antd的日期选择组件月份语言为英文问题

antd的日期组件，除开本身需要引入国际化配置外，它还深度依赖moment仓库，

  • 故需引入 moment 国际化配置
  • 检查 package.json、yarn.lock 中的moment版本是否为 antd 依赖的固定版本@2.24.0
    • 如果已经是了，则无需改动；
    • 如果不是，则需删除多余的依赖，yarn remove moment并删除package.json中的moment引入 ```javascript import ‘moment/locale/zh-cn’; import locale from ‘antd/lib/locale/zh_CN’;

return ( );

  1. <a name="nXnRw"></a>
  2. ## 10、NVM 管理 node 版本问题
  4. 使用 nvm 时，默认的 prefix 是当前激活的 Node.js 版本的安装路径。<br />带来一个问题是：切换版本之后，之前安装全局命令模块需要重新安装，非常不方便。<br />解决方案是配置统一的全局模块安装路径。<br />新建npm_global和npm_cache文件夹，分别用于npm包的全局安装路径和全局cache路径
  6. - 查看当前npm包的全局安装路径、修改npm的包的全局安装路径
  7. ```shell
  8. npm prefix -g 
  9. npm config set prefix "E:\NodeJs\npm\npm_global"

  • 查看当前npm包的全局cache路径、修改npm的包的全局cache位置

    1. npm config get cache
    2. npm config set cache "E:\NodeJs\npm\npm_cache"

  • 查看配置列表

    1. npm config ls

  • 配置环境变量：此电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 系统变量 -> path ->编辑 - > 新增路径 -E:\NodeJs\npm\npm_global（路径可以根据npm prefix -g查看）

  • 改变 yarn 全局bin位置(prefix)

    1. yarn global bin
    2. yarn config set prefix "E:\NodeJs\npm\yarn_bin"

  • 改变 yarn 全局安装位置(folder)

    1. yarn global dir
    2. yarn config  set global-folder "E:\NodeJs\npm\yarn_dir"

  • 改变 yarn 全局cache位置(cache)

    1. yarn cache dir
    2. yarn config set cache-folder "E:\NodeJs\npm\npm_cache"

  • 配置环境变量：将E:\NodeJs\npm\yarn_bin添加到环境变量的path变量中，若该目录下自动生成了bin目录，则添加E:\NodeJs\npm\yarn_bin\bin到环境变量中

11、nginx 返回404

浏览器下的单页面应用的路由模式有下面两种： hash 模式和 history 模式。history 模式下当页面刷新时，如果没有合适的配置，会出现页面 404 的错误。因此需要额外的服务器配置，对于找不到的 url，将首页 html 返回

  • try_files 解决的是：当 nginx 找不到客户端需要的资源时该怎么办的问题。 ```bash location / { try_files $uri $uri/ /index.html; }

`` 以http://www.example.com/post` 为例，$uri 会匹配到 post，nginx 发现 dist 目录下下面没有 post 这个文件，也没有 post 这个文件夹，所以最后会返回 dist 目录下的 index.html。这样，index.html 被浏览器加载之后，前端路由就会工作，将用户需要的资源加载出来。

12、安装 pnpm