2017-08-24 84 views
2

我使用webpack捆綁模塊反應寫在ES6中。直到我添加了json-immutable插件之前,所有工作都已經完成。目前需要的是json-stream-stringify,有一類:webpack 2 uglify插件ES6

class JSONStreamify extends CoStream {...} 
module.exports = function(obj, replacer) { 
    return new JSONStreamify(obj, replacer); 
}; 

的WebPack的作品不錯,但因爲醜化擲錯誤

Unexpected token: name (JSONStreamify)

我發現這裏有關模塊https://github.com/webpack-contrib/uglifyjs-webpack-plugin信息不monify文件。我安裝並添加了ecma支持,但仍然存在相同的錯誤。我已刪除我嘗試添加排除node_modules但沒有結果。

我webpack.config.js是

const path = require('path'); 
const webpack = require('webpack'); 
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); 
module.exports = { 
    entry: { 
    backend: './src/backend.js', 
    frontend: './src/frontend.js', 
    }, 
    output: { 
    path: path.resolve(__dirname,'./dist'), 
    filename: '[name].sakui.min.js' 
    }, 
    externals: { 
    'jQuery':'jQuery', 
    'Foundation':'Foundation', 
    'react': 'React', 
    'react-dom': 'ReactDOM', 
    'redux': 'Redux', 
    'react-redux': 'ReactRedux', 
    'immutable': 'Immutable', 
    'lodash': '_', 
    '_': '_' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     use: { 
      loader: 'babel-loader', 
      options: { 
      "only": "src/**", 
      "presets": [ 
       "env", 
       "react", 
       "es2017", 
       "stage-3" 
      ], 
      "plugins": [["transform-class-properties", { "spec": true }],"transform-decorators-legacy","minify-simplify"], 
      "babelrc": false 
      } 
     } 
     } 
    ] 
    }, 
    plugins: [ 
    new UglifyJSPlugin({ 
     ecma: 6 
    }) 
    ] 
} 

任何提示我怎麼能解決這個問題?也許任何外部工具來縮小文件後的文件?

+1

Uglify不太瞭解ES6,..你有2個選項,轉換成ES5和Uglify,或者不使用Uglify並使用Babel自己的Uglifyer。 (Babili) – Keith

+0

我可以添加webpack選項以僅將ES_5轉儲到node_modules嗎? (將檢查babili看起來不錯) – jaroApp

+0

順便說一句我從我的webpack文件中刪除uglify插件,但我仍然有這個錯誤。 我應該清除一些緩存嗎?我看到它使用了什麼正確的webpack.config文件 – jaroApp

回答

0

解決方案:

一個辦法我發現了什麼是transpile所有與巴貝爾node_modules到ES5和它的作品。

我webpack.config.js

const path = require('path'); 
const webpack = require('webpack'); 
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); 
module.exports = { 
    entry: { 
    backend: './src/backend.js', 
    frontend: './src/frontend.js', 
    }, 
    output: { 
    path: path.resolve(__dirname,'./dist'), 
    filename: '[name].sakui.min.js' 
    }, 
    externals: { 
    'jQuery':'jQuery', 
    'Foundation':'Foundation', 
    'react': 'React', 
    'react-dom': 'ReactDOM', 
    'redux': 'Redux', 
    'react-redux': 'ReactRedux', 
    'immutable': 'Immutable', 
    'lodash': '_', 
    '_': '_' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     use: { 
      loader: 'babel-loader', 
      options: { 
      "presets": [ 
       "env", 
       "react", 
       "es2017", 
       "stage-3" 
      ], 
      "plugins": [["transform-class-properties", { "spec": true }],"transform-decorators-legacy"], 
      "babelrc": false 
      } 
     } 
     } 
    ] 
    }, 
    plugins: [ 
    new UglifyJSPlugin() 
    ] 
} 

也許將是有用的人。