Gatsbyjs async/await 更新報錯解決方法
前言
當我在更新 gatsbyjs 本體和 gatsbyjs-* 插件後，就發現構建 JavaScript 代碼的時候失敗。解決問題的過程，需要多聯想關鍵字。但簡單來說，只要安裝正確的 babel 轉換插件，就可以解決這個問題。
問題
SyntaxError: Unexpected token operator «*», expected punc «(» [component---src-templates-blog-post-js-42473b53655caf4635a2.js:18311,43]這裡是說在 uglifyjs 處理文本的時候，預期 ( 但出現 * 這一個符號，如果你是有用過 generator 的話，你就會發現這裡的線索跟 generator 有一點相似。
generator
function* a() {
yield 1;
}function
function a() {
return 1;
}解決方法
安裝額外的 babel 插件：
npm i babel-plugin-transform-decorators-legacy babel-plugin-transform-regenerator
安裝之後，babel 就可以把上面 generator 的代碼輸出為以下代碼：
var _marked = [a].map(regeneratorRuntime.mark);
function a() {
return regeneratorRuntime.wrap(function a$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return 1;
case 2:
case "end":
return _context.stop();
}
}
}, _marked[0], this);
}轉換後，可以避免 * 這一個符號出現在 ( 之前。
可能你會遇到這樣的報錯信息，具體錯誤位於 async 的那一行代碼上：
Uncaught ReferenceError: regeneratorRuntime is not defined透過 stackoverflow 的回答可以得知，這依然是跟 async/await 相關的問題，使用 babel-plugin-transform-runtime 就好了。
npm install --save-dev babel-plugin-transform-runtime別忘記在gatsbyjs-node.js 文件裏面加入修改 babel 設置的代碼：
exports.modifyBabelrc = ({ babelrc }) => ({
...babelrc,
plugins: babelrc.plugins.concat(['transform-decorators-legacy', 'transform-regenerator', 'transform-runtime']),
});後記
果然我還是要學習一個，看著那兩個符號（*, (），也想不起居然跟 generator 有關。。。