XXX is not defined.eslint no-undef_Beam007

网络投稿 02-07 2066

前言

使用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使用。