Yeoman web 脚手架使用async/await

2021年06月04日 | 前端 ES

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

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ]
}

第二个问题，在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

折腾了好久，终于搞定。