记一次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中

ECMAScript 规范

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

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

写在最后

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

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