NextJs14中设置全局可访问变量

在项目中，有时候需要挂载一些全局可访问的变量，一般我们会定义一些常量的ts｜js文件去import进来访问，但是这种一般需要import进来才可以访问，当然这种有些情况会挂载到global上面去也是可以的，下面的方法也是通过这种实现的，下面介绍一下我自己的实现过程。

一 定义global.ts全局文件

一般建议全局性的东西放到项目根目录下（个人喜好配置）

1，我自己的配置文件（仅供参考）

class Obs {
  private _obsUrl: string;
  private _obsImagePath: string;
  private _fullObsImgPath: string;
  constructor() {
    this._obsUrl = process.env.NEXT_PUBLIC_OBS_URL as string;
    this._obsImagePath = process.env.NEXT_PUBLIC_OBS_IMAGE_PATH as string;
    this._fullObsImgPath = `${this._obsUrl}${this._obsImagePath}`;
  }

  get obsUrl() {
    return this._obsUrl;
  }
  get obsImagePath() {
    return this._obsImagePath;
  }
  get fullObsImgPath() {
    return this._fullObsImgPath;
  }
}

const obs = new Obs();

export default obs;

• 1，这里只是导出了一些常量，避免被修改
• 2，注意：nextJs中，如果要让浏览器可以访问env变量，必须加前缀NEXT_PUBLIC_，不然默认next是不让浏览器环境访问env变量的

2，配置global.ts

import obs from '@/utils/obs'; // 这里面我项目obs的访问域名

type Globals = typeof globalThis & {
  GlobalConst: {
    obsUrl: string;
  };
};

const globals: Globals = globalThis;


//GlobalConst是我自己定义的变量名，里面就是一些全局属性了
globals.GlobalConst = {
  obsUrl: obs.obsUrl,
  obsImagePath: obs.obsImagePath,
  fullObsImgPath: obs.fullObsImgPath,
};

export {};

二 在app的入口文件import导入global

...
import '../global';

到这里，其实已经可以访问到我们定义的变量了，但是如果使用的ts和eslint，就会报错

三 配置ts申明类型文件

1，定义gloab.d.ts类型申明文件

declare global {
  var GlobalConst: {
    obsUrl: string;
    obsImagePath: string;
    fullObsImgPath: string;
  };
}
export {};

1,确保使用 var 关键字为你打算在其他文件中设置和使用的属性添加类型。

2,export {} 将其标记为外部模块。 模块是包含至少 1 个导入或导出语句的文件。 我们必须这样做才能扩大 global 的范围。

2，在tsconfig.json文件中配置刚才申明的type申明文件路径，如果ts不会将申明文件加载的

   "compilerOptions": {
    ...
    "typeRoots": ["./node_modules/@types",  "./global.d.ts"],
  },

到这里，ts就不会报错了接下来解决eslint中no-undef 规则将发出警告报错的问题

四 配置eslint

要在配置文件中配置全局变量，请将 globals 配置属性设置为一个对象，该对象包含以你希望使用的每个全局变量。对于每个全局变量键，将对应的值设置为 "writable" 以允许重写变量，或 "readonly" 不允许重写变量

{

   "globals": {
        "GlobalConst": "writable"
   },
}

• readonly/false——只读
• writable/true——可写
• off——禁用该全局变量
• 说明：true/false 等价于只读/可写，但不推荐使用

写在最后

到这里，基本就结束了，当然，全局变量也有其他的实现方式，如果嫌麻烦，直接配置在 env 环境变量中直接读取即可，这里只是提供一种方案，如果大家有其他更好用的方案，可以评论区讨论一下。