来自 UglifyJs 的 renderer.js 中的错误意外的标记标记 «(»答案

【问题标题】：ERROR in renderer.js from UglifyJs Unexpected token punc «(»来自 UglifyJs 的 renderer.js 中的错误意外的标记标记 «(»
【发布时间】：2017-09-21 17:19:57
【问题描述】：

版本：webpack 2.3.3

你好

我正在尝试使用 Vuejs 构建我的第一个 Electron 应用程序。在我来打包应用程序之前，一切似乎都很顺利。

当我运行 npm run dev 时，一切正常。

但是，当我运行 npm build:darwin 时，出现以下错误

ERROR in renderer.js from UglifyJs Unexpected token punc «(», expected punc «:» [renderer.js:26813,14]

它确实最终编译了，但是当我运行应用程序时，我得到了白屏死机。

根据我的阅读，这可能是因为 Uglifyjs 不编译 ES6，但您可以通过 .babelrc 文件中的以下内容来克服它

"renderer": {
  "presets": [
    ["es2015", { "modules": false }],
    "stage-0"
  ]
}

我不知道如何调试它。任何帮助将不胜感激。

谢谢

生成的debug.log是……

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/7.9.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'pack' ]
2 info using npm@4.2.0
3 info using node@v7.9.0
4 verbose run-script [ 'prepack', 'pack', 'postpack' ]
5 info lifecycle FormBuff@0.0.0~prepack: FormBuff@0.0.0
6 silly lifecycle FormBuff@0.0.0~prepack: no script for prepack, continuing
7 info lifecycle FormBuff@0.0.0~pack: FormBuff@0.0.0
8 verbose lifecycle FormBuff@0.0.0~pack: unsafe-perm in lifecycle true
9 verbose lifecycle FormBuff@0.0.0~pack: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/admin/Code/electron/formbuff/node_modules/.bin:/Users/admin/Code/electron/formbuff/node_modules/.bin:/Users/admin/.config/yarn/link/node_modules/.bin:/Users/admin/Code/electron/formbuff/node_modules/.bin:/Users/admin/.config/yarn/link/    node_modules/.bin:/usr/local/Cellar/yarn/0.23.2/libexec/bin/node-gyp-bin:/Users/admin/.rbenv/shims:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/admin/.composer/vendor/bin:/Users/admin/go/bin
10 verbose lifecycle FormBuff@0.0.0~pack: CWD: /Users/admin/Code/electron/formbuff
11 silly lifecycle FormBuff@0.0.0~pack: Args: [ '-c', 'npm run pack:main && npm run pack:renderer' ]
12 silly lifecycle FormBuff@0.0.0~pack: Returned: code: 2  signal: null
13 info lifecycle FormBuff@0.0.0~pack: Failed to exec pack script
14 verbose stack Error: FormBuff@0.0.0 pack: `npm run pack:main && npm run pack:renderer`
14 verbose stack Exit status 2
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:194:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:194:7)
14 verbose stack     at maybeClose (internal/child_process.js:899:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid FormBuff@0.0.0
16 verbose cwd /Users/admin/Code/electron/formbuff
17 error Darwin 16.5.0
18 error argv "/usr/local/Cellar/node/7.9.0/bin/node" "/usr/local/bin/npm" "run" "pack"
19 error node v7.9.0
20 error npm  v4.2.0
21 error code ELIFECYCLE
22 error errno 2
23 error FormBuff@0.0.0 pack: `npm run pack:main && npm run pack:renderer`
23 error Exit status 2
24 error Failed at the FormBuff@0.0.0 pack script 'npm run pack:main && npm run pack:renderer'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the FormBuff package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error     npm run pack:main && npm run pack:renderer
24 error You can get information on how to open an issue for this project with:
24 error     npm bugs FormBuff
24 error Or if that isn't available, you can get their info via:
24 error     npm owner ls FormBuff
24 error There is likely additional logging output above.
25 verbose exit [ 2, true ]

【问题讨论】：

为什么在电子应用中使用 webpack？您可以使用电子编译并自动构建所有单个文件组件（如果您正在使用它们）。 github.com/electron/electron-compile
@BertEvans 老实说，我用谷歌搜索了一些电子和 vuejs 的样板，发现了这个 - simulatedgreg.gitbooks.io/electron-vue/en 我已经用它构建了一些其他东西（尽管是小应用程序），我没有问题.不过我会看看你的链接，看起来不错！谢谢！

标签： webpack vue.js electron uglifyjs

【解决方案1】：

我遇到了类似的问题。那是诀窍 https://github.com/SimulatedGREG/electron-vue/issues/200

【讨论】：

【解决方案2】：

你可以尝试安装uglify的this版本，它叫uglify-es，它是：

用于 ES6+ 的 JavaScript 解析器、管理器/压缩器和美化工具包

uglify-es npm link

就我而言，我已经安装了babel 插件来处理这个问题。如果你想尝试，你应该这样做：

将此添加到您的package.json

"babel-core": "latest",
"babel-loader": "latest",
"babel-plugin-transform-async-to-generator": "latest",
"babel-plugin-transform-runtime": "latest",
"babel-preset-es2015": "latest",
"babel-runtime": "latest"

将你的webpack.config文件设置为（例如这是我的）：

const path = require('path')
const webpack = require('webpack')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                query: {
                    name: '[name].[ext]?[hash]'
                }
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false }})
    ])
}

将您的.babelrc 文件设置为：

{
    "presets": ["es2015"],
    "plugins": ["transform-runtime", "transform-async-to-generator"]
}

希望对你有帮助:)

【讨论】：