taro使用defineConstants定义全局变量eslint报错该变量不存在

问题描述

在taro项目中使用defineConstants定义一些全局变量供业务代码中进行使用，全局变量声明config/index.js代码如下：

module.exports = {
  defineConstants: {
    LOGIN_URL: JSON.stringify('/baidu/login'), 
  },
1
2
3
4

全局变量使用代码如下：

/**
 * 跳转登录
 * @param {*} redirect 登录回跳页面，默认返回当前页面
 */
export const goLogin = (redirect = '') => {
  Taro.redirectTo({
    url: queryString.stringifyUrl({
      url: LOGIN_URL,
      query: {
        redirect: redirect || window.location.href,
      },
    }),
  });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在引用该变量时eslint报错如下：

问题出现原因

eslint有一条规则（no-undef）是不允许使用未定义的变量，在eslint 检测代码的时候会报错

解决方案

修改 .eslintrc.js（eslint配置文件）内容如下:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: ['taro/react'],
  rules: {
    'no-console': ['error', { allow: ['error'] }],
  },
  globals: {
    LOGIN_URL: 'readonly',
  }
};
1
2
3
4
5
6
7
8
9
10

知识剖析

Specifying Globals

当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。

要在你的 JavaScript 文件中，用注释指定全局变量，格式如下：

/* global var1, var2 */
1

这定义了两个全局变量，var1 和 var2。如果你想选择性地指定这些全局变量可以被写入(而不是只被读取)，那么你可以用一个 “writable” 的标志来设置它们:

/* global var1:writable, var2:writable */
1

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

{
    "globals": {
        "var1": "writable",
        "var2": "readonly"
    }
}
1
2
3
4
5
6

参考资料

• eslint- Globals
• ESLint中的globals——向ESLint规则中添加全局变量
• eslint从入门到放弃之esLint配置之globals（二)