Yeoman web 脚手架使用async/await
使用Yeoman web 脚手架生成web应用后,如果使用所谓的异步终极解决方案async/await
,会遇到一系列的问题。
- 第一个问题:浏览器在使用async或者await的地方会报错
Uncaught ReferenceError: regeneratorRuntime is not defined
。然后网上一搜,全是要装babel-plugin-transform-runtime和babel-runtime的,全是邪路!!!babel-runtime或者老一点的babel-polyfill主要是以补丁的方式让不支持ES语法的浏览器来支持ES语法。但是时到今日,IE已经完蛋了,微软的Edge浏览器都换成谷歌核了,真正的内核只有谷歌的和火狐的,他们对ES语法在支持都好得很,所以完全没必要,直接配置成支持ES的就行,配置方法如下:
.babelrc
{ |
- 第二个问题,在build时,可能会出现
error Parsing error: Unexpected token function
'lint' errored after 13 s
ESLintError in plugin "gulp-eslint"
这个容易解决,eslint默认的环境是ES5,async/await是ES8的特性,所以认为语法错误,配置一下版本就行,配置方法如下:
gulpfile.js里lintBase函数
options['parserOptions'] = { "ecmaVersion": 8 }; |
- 第三个问题,在build的时候,可能会出现
'html' errored after 3.12 s
GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: operator «>»
跟上面的原因一样,gulp-uglify混淆压缩时不支持ES语法,改成gulp-uglify-es即可,首先装上
npm install --save-dev gulp-uglify-es |
然后将gulpfile.js里html函数中的$.uglify
换成$.uglifyEs.default
折腾了好久,终于搞定。