问题描述

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

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

全局变量使用代码如下：

/*** 跳转登录* @param {*} redirect 登录回跳页面，默认返回当前页面*/
export const goLogin = (redirect = '') => {Taro.redirectTo({url: queryString.stringifyUrl({url: LOGIN_URL,query: {redirect: redirect || window.location.href,},}),});
};

在引用该变量时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',}
};

知识剖析

Specifying Globals

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

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

/* global var1, var2 */

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

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

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

{"globals": {"var1": "writable","var2": "readonly"}
}

参考资料

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