• 记一次debug记录:Uncaught SyntaxError: Unexpected token ILLEGAL


    在使用FIS3搭建项目的时候,遇到了一些问题,这里记录下。

    这里是发布搭建代码:

    // 代码发布时
    fis.media('qa')
      .match('*.{js,css,png}',    { useHash: true })                                     // 添加指纹
      .match('*.js',                     { optimizer: fis.plugin('uglify-js') })         // js压缩
      .match('*.css',                  { optimizer: fis.plugin('clean-css') })      // css压缩
      .match('*.{png,jpg}',        { optimizer: fis.plugin('png-compressor') })   // 图片压缩
      .match('::package',          { spriter: fis.plugin('csssprites') })          // 图片合并,需要添加:?__sprite
      .match('*.css',                  { useSprite: true })                                   // 对 CSS 进行图片合并
      .match('*', {
        deploy: [
          fis.plugin('http-push', {
            receiver: 'xxx',
            to: '/xxx/CMS-OPERATION/CMS/static
'
          }),
          fis.plugin('skip-packed', {})
        ]
      });
    

    大家如果使用fis的话,可以把上面的代码复制下来,然后尝试发布,保准你会得到下面的提示:

    [ERROR] Load /Users/yangyoucun/Documents/market-h5-fe/cms/fis-conf-cms.js error: Unexpected token ILLEGAL
    SyntaxError: Unexpected token ILLEGAL
    

    配置文件有200行,刚开始以为是引号出现问题,然后开始排查所有引号,是不是使用正确。

    经过排查,引号都是正常的,然后又怀疑是不是分号使用错误,一行一行的找,分号也都正确!

    最后实在不知道什么原因,果断求助谷歌。

    查看到了这个问题:

    No visible cause for “Unexpected token ILLEGAL”

    这是地址:No visible cause for “Unexpected token ILLEGAL”

    以下是个人翻译,如果误导请指出。

    文章大意是:

    提问者:我的代码就只有一句,为啥还报Unexpected token ILLEGAL错误!代码如下:

    var foo = 'bar';​
    

    下面是解答:

    当JavaScript解析器解析代码的时候,会把代码分成片段称为tokens,在JavaScript中有四种基础的token类型,当一个token不能被分类到这其中的时候,就会贴上ILLEGAL标签,并抛出错误。

    还有一些情况会导致这种情况发生,比如:

    • 你的代码里有一个特殊的@
    • 使用花括号有问题
    • 圆括号
    • 自动补充括号
    • 单引号没有闭合(例如:this.run('dev1)
    • ...

    很多种情况都会引起这个错误。如果你的代码里面没有明显的语法错误和不合法字符,那么很有可能是由看不见的不合法字符导致的。这也是这个回答要讲述的。

    但是,我看不见任何不合法的字符啊!

    在代码中有一些不合法的字符在分号的后面。这些字符为Unicode U+200B Zero-width space(又称为:ZWSP,例如HTML实体:​),大致翻译成零宽字符。这些字符经常会引起Unexpected token ILLEGALJavaScript语法错误。

    它从何而来?

    我不肯定,但我猜来自jsfiddle,如果你从里面复制代码,就很有可能包括一个或多个U+200B字符。好像这个工具使用这些字符来控制长字符串。

    UPDATE 2013-01-07

    自从jsfiddle上次更新,现在它会用红色的原点显示出这些字符,和codepen一样。很明显,它再也没有插入U+200B字符,所以这个问题从现在开始应该很少会出现了。

    UPDATE 2015-03-17

    Vagrant有时候也会出现这种问题,这是VirtualBox的bug。这篇文章的做法是设置sendfile为off;在nginx配置中或者Apache中,设置EnableSendfile为off。

    也有人指出,从Chrome开发者工具中复制出来的代码也包括这些字符,但是我不能够在我的当前版本(22.0.1229.79 on OSX)中复现。

    我如何才能认出它

    这些字符时看不见的,那么怎么才能知道他们藏在哪里呢?你可以要求你的编辑器来显示这些不可见的字符,许多文本编辑器都有这个功能。例如Vim,默认会显示出来这些特殊字符,并且ZWSP显示为<u200b>。你也可以在网上发现他们:jsbin会展示为红点在代码编辑框中,CodePen.io也会展示为一个点,删掉在保存然后就没有了。

    下面展示一下截图:

    codepen中

    jsfiddle中

    jsbin中

    相关联的问题

    出现这些字符有时候也不是啥坏事,它也非常有用。在Wiki上有一个例子演示了如何用它来控制长文本的折断换行。然而,如果你并没有意识到你的文本中有这些字符的话,这就可能会引起麻烦了。如果这些字符出现在你的字符串中(例如:DOM元素的nodeValue上,但是看不见)。你可能会觉得这个这个字符串是空的,但事实上并不是(使用String.trim也不管用)。

    ZWSP也会引起其他的空格在HTML页面中的展示,就比如ZWSP出现在两个<div>元素中间时(就比如这个问题)。这个案例基本上不会再jsfiddle中复现了。

    另一个潜在的问题是:如果网页的编码不是UTF-8,那么这些字符可能回显示出来(比如在latin1编码中,会显示为​)。

    如果ZWSP出现在了CSS代码中(不管是内联的还是引用的),样式同样可能不被展示(经我尝试,在开发者工具中显示出来一个空格),一些样式就不会生效(就比如这个问题)。

    ** ECMAScript 规范**

    在ECMAScript规范(35.1版本)中我没有找到任何提到这些字符的详细说明,当前版本在第7.1节提到了这些字符(U+200C以及U+200D),规范中写道:这些字符应该被当做IdentifierParts(标识符)进行处理,可以出现在评论、字符串文本或者正则表达式文本中,这些字符也可以是变量名,例如:var xu200c;

    7.2章节中列举了有效的空白字符(例如tab、space、no-break space等等),也稍微提及了其他的Unicode空格字符(“ZS”分类),也应该当做空白格处理。我可能不是最合适的人来讨论这个规范,但是在实际中执行时(Chrome、Firefox)都把他们当做unexpected token,引发语法错误,在我看来,根据这些,U+200B应该被考虑进空白格规范中。

    写在最后

    其实最后的解决方法很简单,只要把代码复制到jsfiddle中或者codepen中,删除错误点代码,然后复制回来就可以了。但是查找过程之痛苦只有我自己知道,配置很正确,但就是无法执行!

    每一次debug都是一次学习吧,多多记录,多多积累。

  • 相关阅读:
    第三天-基本数据类型 int bool str
    第二天-while循环 格式化输出 运算符 编码
    第一天-python基础
    Mysql
    Mysql
    Mysql
    Mysql
    Mysql
    Mysql
    Php
  • 原文地址:https://www.cnblogs.com/yangyoucun/p/6151432.html
Copyright © 2020-2023  润新知