XXX is not defined.eslint no-undef

前言

使用x2js进行 XML 和 JavaScript 对象之间转换时，遇到的问题。
同样适用于通过<script>引入第三方包的情况下，比如高德地图、百度地图的引入等。

问题代码

<script language="javascript"
  src="https://webapi.amap.com/maps?v=1.4.15&key=***&plugin=AMap.ControlBar,Map3D,AMap.DistrictSearch"
  ignore>
</script>
<script language="javascript" src="/static/js/xml2json.js" ignore>

// JSON转XML
json2xml (json) {
  let x2js = new X2JS()
  let xmlStr = x2js.json2xml_str(json)
  return xmlStr
},
// XML转JSON
xml2json (xmlStr) {
  let x2js = new X2JS()
  let jsonObj = x2js.xml_str2json(xmlStr)
  return jsonObj
},

使用报错

‘X2JS’ is not defined.eslint no-undef

分析原因

通过<script src="/static/js/xml2json.js"></script>引入的，没有定义全局变量X2JS，之前高德地图的引入也遇到过同样的问题。

解决办法

方法一：eslint校验配置去掉对no-undef校验

修改.eslintrc.js文件：
在rules规则下，添加'no-undef': process.env.NODE_ENV === 'production' ? 'warn' : 'off'即可。
参考如下：

rules: {
    ……,
    'no-undef': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }

该方法简单、方便，eslint的报错配置eslint解决，但是这样会关闭对所有未定义变量的警告提示。

方法二：定义全局变量

修改vue.config.js文件：
在configureWebpack下的externals中定义全局变量即可。
参考如下：

configureWebpack: {
  // 全局常量定义
  externals: {
    // AMap: 'AMap', // 高德地图
    X2JS: 'X2JS' // xml转js
  }
},

(其他的全局变量定义同理，比如AMap高德地图的全局变量。)
然后在使用到X2JS的地方导入import X2JS from 'X2JS'即可，不会再出现未定义的报错。

方法三：直接import使用

将原本<script>的引入方式：
<script language="javascript" src="/static/js/xml2json.js" ignore>
改为import导入：
import X2JS from '@/assets/js/xml2json.js'
照常使用，就无需定义全局变量了！

结论

综上所述，如遇到相同的问题，优先推荐方法三：直接import使用。