意外的标记错误使用UglifyJS与Preact，2的WebPack

我建立一个Chrome扩展与Preact/ES6 /的WebPack。我包使用2种配置：debug使用ESLint，巴贝尔和CSS + JSON装载机，prod增加了两个插件：UglifyJS和邮编。这里的webpack.config.js：意外的标记错误使用UglifyJS与Preact，2的WebPack

const webpack = require('webpack'); 
const path = require('path'); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const WebpackCleanupPlugin = require('webpack-cleanup-plugin'); 
const ZipPlugin = require('zip-webpack-plugin'); 
const manifest = require('./src/manifest'); 

let options = { 
    // entry file - starting point for the app 
    entry: { 
    popup: './src/scripts/popup.js', 
    options: './src/scripts/options.js', 
    background: './src/scripts/background.js' 
    }, 

    // where to dump the output of a production build 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'scripts/[name].js' 
    }, 

    module: { 
     rules: [ 
     { 
     test: /\.jsx?/i, 
     exclude: /node_modules/, 
     loader: 'eslint-loader', 
     options: { 
     }, 
     enforce: 'pre' 
    }, 
    { 
     test: /\.jsx?/i, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     options: { 
      presets: [ 
      ['env', { 
       'targets': { 
       'chrome': 52 
       } 
      }] 
      ], 
      plugins: [ 
      ['transform-react-jsx'], 
      ['module-resolver', { 
       'root': ['.'], 
       'alias': { 
       'react': 'preact-compat', 
       'react-dom': 'preact-compat' 
       } 
      }] 
        ] 
       } 
      }, 
     { 
     test: /\.css$/, 
     use: ['style-loader', 'css-loader'] 
     }, 
     { 
     test: /\.json$/, 
     use: 'json-loader' 
     } 
     ] 
    }, 

    plugins: [ 
    new WebpackCleanupPlugin(), 
    new CopyWebpackPlugin([ 
     {from: './src/_locales', to: '_locales'}, 
     {from: './src/icons', to: 'icons'}, 
     {from: './src/manifest.json', flatten: true}, 
     {from: './src/*.html', flatten: true} 
    ]) 
    ], 

    // enable Source Maps 
    devtool: 'source-map', 
}; 

if(process.env.NODE_ENV === 'production') { 
    options.plugins.push(
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: false, 
     drop_console: false, 
     screw_ie8: true, 
     conditionals: true, 
     unused: true, 
     comparisons: true, 
     sequences: true, 
     dead_code: true, 
     evaluate: true, 
     if_return: true, 
     join_vars: true, 
     }, 
     output: { 
     comments: false, 
     }, 
    }), 
    new ZipPlugin({ 
     path: '../dist', 
     filename: `${manifest.name} ${manifest.version}.zip` 
    }) 
); 
} 

console.log(`This is a ${process.env.NODE_ENV === 'production' ? 'production' : 'development'} build with ${options.plugins.length} plugins`); 

module.exports = options;

但是当我运行prod，我收到以下错误：

ERROR in scripts/popup.js from UglifyJs 
Unexpected token: name (getLatestValues) [scripts/popup.js:29428,4] 

ERROR in scripts/options.js from UglifyJs 
Unexpected token: name (getLatestValues) [scripts/options.js:29428,4] 

ERROR in scripts/background.js from UglifyJs 
Unexpected token: name (getLatestValues) [scripts/background.js:28678,4]

值得一提的是，getLatestResults不是唯一的在我的代码的唯一功能有await在它的前面。另外，它应该只出现在background.js中，因为其他入口点不应该调用它。

另外值得一提的是，如果我只是发表意见UglifyJS代码，所产生的压缩扩展效果很好。

什么样的配置一块我缺少做这些错误会消失吗？

来源

2017-05-14 Traveling Tech Guy

貌似丑化巴贝尔前莫名其妙地运行。或者它不喜欢babel的输出格式。 'async' /'await'究竟编译到什么生成器？我猜uglify不知道ES6'yield'关键字。 – Bergi

我相信它会被翻译成'发生器'。不过，我的代码中有其他位置使用'async/await'，因为某些原因未被调用。（除非Babel以不同的方式实现不同的调用，即类方法与常规函数）。 –

事实证明，当前（5/2017）内置的webpack.optimize.UglifyJsPlugin不支持ES6。当巴贝尔transpiles await/async它把它们转化成generator s，这导致UglifyJS抛出一个错误。

有几种备选方案在this article上市UglifyJS，但我希望的是，的WebPack家伙会更新插件，而且我可以离开我的代码不变。

TL; DR：我的代码是OK的; UglifyJS不支持ES6;将在未来支持，否则将被替代替代。

来源

2017-05-15 22:16:14

意外的标记错误使用UglifyJS与Preact，2的WebPack

回答

相关问题