无法修复来自UglifyJs的“意外令牌名称«i»，期望punc«;»”错误

Question

我已经创建了一个带有自定义Next服务器的React应用程序。 server.js文件内容如下：

const { createServer } = require('http');
const next = require('next');
const app = next({
  dev: process.env.NODE_ENV !== 'production',
  conf: {
  webpack: config => {
    config.devtool = false;
    for (const r of config.module.rules) {
      if (r.loader === 'babel-loader') {
        r.options.sourceMaps = false;
      }
    }
    return config;
  }
}
});
const routes = require('./routes');
const handler = routes.getRequestHandler(app);
app.prepare().then(() => {
   createServer(handler).listen(3000, err => {
    if (err) throw err;
   });
});

然而，我在执行npm run build时遇到了问题，因为我收到了以下的错误信息：

Unexpected token name «i», expected punc «;» [commons.js:124406,11]
at /home/parstoo/Dropbox/Projects/Ethereum/SupplyChain/node_modules/next/dist/server/build/index.js:182:21

根据论坛的说法，该问题是由于UglifyJs不支持ES6而引起的，因此我尝试使用以下链接解决它：这个和这个。我几乎尝试了所有建议，但都没有奏效。

另外，我在根目录下没有webpack.config.js文件。因此，我在根目录下创建了一个（我不知道是否正确），其内容如下： webpack.config.js:

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  optimization: {
  minimizer: [new UglifyJsPlugin()],
  },
};

package.json 内容：

 {
   "name": "supplychain",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "mocha",
     "dev": "node server.js",
     "start": "NODE_ENV=production server.js",
     "transpile": "babel src -d dist --copy-files",
     "prepublishOnly": "npm run transpile",
     "build": "next build",
     "deploy": "gh-pages -d examples/dist",
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "@babel/polyfill": "^7.2.5",
     "fs-extra": "^7.0.1",
     "ganache-cli": "^6.4.1",
     "mocha": "^5.2.0",
     "next": "^4.1.1",
     "next-routes": "^1.4.2",
     "radium": "^0.25.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "semantic-ui-react": "^0.82.5",
     "solc": "^0.4.25",
     "truffle-hdwallet-provider": "0.0.3",
     "web3": "^1.0.0-beta.35"
  },
    "devDependencies": {
      "@babel/cli": "^7.2.3",
      "@babel/core": "^7.2.2",
      "@babel/preset-env": "^7.3.1",
      "babel": "^6.23.0",
      "babel-cli": "^6.26.0",
      "babel-preset-es2015": "^6.24.1",
      "css-loader": "^2.1.0",
      "html-webpack-plugin": "^3.2.0",
      "npm-install-webpack-plugin": "^4.0.5",
      "terser-webpack-plugin": "^1.3.0",
      "uglifyjs-webpack-plugin": "v1.0.0-beta.1",
      "webpack": "^4.35.0",
      "webpack-cli": "^3.3.4",
      "webpack-dev-server": "^3.7.2"
  }
}

有人能帮我解决这个问题吗？

- parastoo

---

你说你尝试了两件事情。你实际上尝试了什么？你是否真正使用webpack或进行任何从ES6编译脚本的操作，还是只是在项目中放置了一个webpack.config.js文件？ - JLRishe

我尝试了这两个链接中的所有建议，包括更改.babelrc文件、创建webpack.config.js并使用上述内容...至于第二个问题，我只是将webpack.config.js文件放在我的项目(根目录)中。 - parastoo

你需要实际上使用webpack才能让它发挥作用。也许你应该通过webpack网站上的教程来学习一下？webpack有一个uglifyjs插件可用，所以可能这正是你需要的。 - JLRishe

我安装了uglifyjs插件并创建了webpack.config文件，就像我之前提到的那样，但是它没有起作用。 - parastoo

Answer 1

根据论坛的说法，这个问题是由于UglifyJs不支持ES6引起的，所以我尝试通过以下链接解决它：这里和这里。我几乎尝试了所有建议，但没有一个起作用。

尝试使用terser而不是使用UglifyJs！https://github.com/terser/terser Uglify-js只能转译es5语法。如果您想要转译es6+语法，请使用terser。

- Kewin Remy

Answer 2

很可能是一个较为特殊的情况，当我在调用等待时没有将函数声明为async时会出现这个错误：

function doThing() {
    ...
    let response = await fetch('url');
    ...
}

我遇到了如下错误：

Caused by: SyntaxError: Unexpected token: name «fetch», expected: punc «;»

虽然错误提示是正确的，但它并没有帮助我解决问题。解决方法是在函数声明前添加 async 关键词。

- Milkman Matty

Answer 3

UglifyJs仅支持ES5（不支持ES6）。我在您的代码中看到您首先使用Babel将ES6转译为ES5。请确保Babel确实将ES5转译为ES6，否则UglifyJs将会抛出此错误！

我曾经遇到过同样的问题，解决方法如下： 1）使用Babel转译ES6 js文件并检查结果。 2）结果显示部分代码仍然是ES6！ 3）找到根本原因（我的问题是默认的babel文件名排除了node_module转译=> babel 7 don't compile class ES6 which in node_modules）。

希望能有所帮助。

- Kewin Remy

Answer 4

您可以使用uglify-js-es6 npm i uglify-js-es6

- Yordanis Gómez Finalé

---

尽管uglify-js-es6可能仍然可用，但它最后更新于3年前。目前有更好的替代方案可供选择。 - Phaze Phusion