在使用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”

文章大意是:

提问者:我的代码就只有一句,为啥还报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字符。好像这个工具使用这些字符来控制长字符串。

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

我如何才能认出它

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

下面展示一下截图:

codepen中

记一次debug记录:Uncaught SyntaxError: Unexpected token ILLEGAL-LMLPHP

jsfiddle中

记一次debug记录:Uncaught SyntaxError: Unexpected token ILLEGAL-LMLPHP

jsbin中

记一次debug记录:Uncaught SyntaxError: Unexpected token ILLEGAL-LMLPHP

相关联的问题

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

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

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

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

** ECMAScript 规范**

在ECMAScript规范(35.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都是一次学习吧,多多记录,多多积累。

05-08 08:25