意外的標記錯誤使用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

回答

相關問題