在使用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 ILLEGAL
JavaScript语法错误。
它从何而来?
我不肯定,但我猜来自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规范(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都是一次学习吧,多多记录,多多积累。