Uglify不允许为生产而建造

Question

当我尝试构建我的反应应用程序以在生产中部署时，我收到以下错误：

ERROR in bundles.js from UglifyJs
SyntaxError: Unexpected token: name (nameServer) [./src/utils/index.js:15,4]

但是在尝试修复问题后，我注意到uglify它不能识别我的es6和es7代码。

我删除了uglify配置以进行紧急部署，但我需要解决此问题。

这是我的实际配置：

的package.json：

{
  "name": "Brian",
  "version": "0.5.0",
  "description": "A data reporter",
  "scripts": {
    "clean": "rimraf dist",
    "build": "webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js",
    "build:production": "npm run clean && npm run build",
    "lint": "eslint src",
    "lint:fix": "npm run lint -- --fix",
    "start": "node bin/server.js",
    "test": "karma start"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/xxx/xxx.git"
  },
  "homepage": "https://github.com/xxx/xxx/",
  "bugs": "https://github.com/xxx/xxx/issues",
  "keywords": [
    "react",
    "reactjs",
    "babel6",
    "redux",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack"
  ],
  "license": "MIT",
  "authors": [],
  "contributors": [],
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "babel-core": "^6.8.0",
    "babel-eslint": "^6.0.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-polyfill": "^6.8.0",
    "babel-preset-es2017": "^1.4.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "bootstrap-loader": "^1.0.10",
    "bootstrap-sass": "^3.3.6",
    "css-loader": "^0.23.1",
    "es6-promise": "^3.1.2",
    "eslint": "^3.9.1",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.8.0",
    "expect": "^1.19.0",
    "exports-loader": "^0.6.3",
    "express": "^4.13.4",
    "express-open-in-editor": "^1.1.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "imports-loader": "^0.6.5",
    "jasmine-core": "^2.4.1",
    "json-loader": "^0.5.4",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^1.0.1",
    "karma-mocha": "^1.0.1",
    "karma-webpack": "^1.7.0",
    "less": "^2.6.1",
    "less-loader": "^2.2.3",
    "mocha": "^2.2.5",
    "morgan": "^1.7.0",
    "node-sass": "^3.7.0",
    "postcss-import": "^8.1.1",
    "postcss-loader": "^0.9.1",
    "react-hot-loader": "^1.3.0",
    "resolve-url-loader": "^1.4.3",
    "rimraf": "^2.5.0",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.0",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.10.0",
    "webpack-merge": "^0.12.0"
  },
  "dependencies": {
    "chart.js": "^1.1.1",
    "classnames": "^2.2.5",
    "flag-icon-css": "^1.3.0",
    "griddle-react": "^0.5.0",
    "isomorphic-fetch": "^2.2.1",
    "moment": "^2.13.0",
    "moment-timezone": "^0.5.4",
    "react": "^15.0.2",
    "react-addons-css-transition-group": "^15.0.2",
    "react-bootstrap": "^0.29.3",
    "react-bootstrap-daterangepicker": "^3.0.0",
    "react-chartjs": "jhudson8/react-chartjs",
    "react-document-meta": "^2.0.3",
    "react-dom": "^15.4.1",
    "react-intl-redux": "0.0.7",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.0",
    "react-router-bootstrap": "^0.23.0",
    "react-router-redux": "^4.0.4",
    "react-s3-uploader": "^3.0.3",
    "react-select": "1.0.0-beta13",
    "react-transform-hmr": "^1.0.4",
    "redux": "^3.5.2",
    "redux-form": "^5.2.3",
    "redux-logger": "2.6.0",
    "redux-thunk": "^2.0.1",
    "rimraf": "^2.5.2",
    "underscore": "^1.8.3"
  }
}

的WebPack / common.config.js：

const path = require('path');
const autoprefixer = require('autoprefixer');
const postcssImport = require('postcss-import');
const merge = require('webpack-merge');

const development = require('./dev.config.js');
const production = require('./prod.config.js');

require('babel-polyfill').default;

const TARGET = process.env.npm_lifecycle_event;

const PATHS = {
  app: path.join(__dirname, '../src'),
  build: path.join(__dirname, '../dist'),
};

process.env.BABEL_ENV = TARGET;

const common = {
  entry: [
    PATHS.app,
  ],

  output: {
    path: PATHS.build,
    filename: 'bundles.js',
  },

  resolve: {
    extensions: ['', '.jsx', '.js', '.json', '.scss'],
    modulesDirectories: ['node_modules', PATHS.app],
  },

  module: {
    loaders: [{
      test: /bootstrap-sass\/assets\/javascripts\//,
      loader: 'imports?jQuery=jquery',
    }, {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/font-woff',
    }, {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/font-woff2',
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/octet-stream',
    }, {
      test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/font-otf',
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file',
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=image/svg+xml',
    }, {
      test: /\.js$/,
      loader: 'babel',
      query: {
        cacheDirectory: true,
        plugins: ['transform-decorators-legacy' ],
        presets: ['es2017', 'react', 'stage-0']
      },
      exclude: /node_modules/,
    }, {
      test: /\.png$/,
      loader: 'file?name=[name].[ext]',
    }, {
      test: /\.jpg$/,
      loader: 'file?name=[name].[ext]',
    }, { 
      test: /\.json$/, 
      loaders: ["json"] 
    }],
  },

  postcss: (webpack) => {
    return [
      autoprefixer({
        browsers: ['last 2 versions'],
      }),
      postcssImport({
        addDependencyTo: webpack,
      }),
    ];
  },
};

if (TARGET === 'start' || !TARGET) {
  module.exports = merge(development, common);
}

if (TARGET === 'build' || !TARGET) {
  module.exports = merge(production, common);
}

的WebPack / prod.config.js：

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'source-map',

  entry: ['bootstrap-loader/extractStyles'],

  output: {
    publicPath: '/dist/',
  },

  module: {
    loaders: [{
      test: /\.scss$/,
      loader: 'style!css!postcss-loader!sass',
    }],
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"',
      },
      __DEVELOPMENT__: false,
    }),
    new ExtractTextPlugin('bundle.css'),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
    }),
  ],
};

Answer 1

尝试使用Babeli插件...也许你会比我更幸运..我发布了我的webpack.prod.js文件..希望它可以帮助你..或者以正确的方式获取

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');
var BabiliPlugin = require("babili-webpack-plugin");

module.exports = {
    entry: {
        "polyfills": "./polyfills.ts",
        "vendor": "./vendor.ts",
        "app": "./app/main.ts"
    },
    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
    },
    output: {
        path: "./app_build",
        filename: "js/[name]-[hash:8].bundle.min.js"
    },

    module: {
        loaders: [
           {
               loader: "babel-loader",

               // Skip any files outside of your project's `src` directory
               //include: [
               //  "app_build",
               //],
               exclude: [
                 path.resolve(__dirname, "node_modules")
               ],
               // Only run `.js` and `.jsx` files through Babel
               test: /\.js/,

               // Options to configure babel with
               query: {
                   plugins: ['transform-runtime', 'babel-plugin-transform-async-to-generator'],
                   presets: ['es2015', 'stage-0'],
               }
           },
           {
               test: /\.ts$/,
               loader: "ts"
           },
           {
               test: /\.html$/,
               loader: "html"
           },
           //{
           //    test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
           //    loader: "file?name=assets/[name]-[hash:6].[ext]",
           //},
           {
               test: /\.(png|jpg|gif|ico)$/,
               //include:  path.resolve(__dirname, "assets/img"),
               loader: 'file?name=assets/img/[name]-[hash:6].[ext]'
           },
           {
               test: /\.(woff|woff2|eot|ttf|svg)$/,
               //  exclude: /node_modules/,
               loader: 'file?name=/assets/fonts/[name].[ext]'
           },
           // Load css files which are required in vendor.ts
           {
               test: /\.css$/,
               loader: "style-loader!css-loader"
           },
           {
               test: /\.scss$/,
               loader: ExtractTextPlugin.extract('css!sass')
           },
        ]
    },
    plugins: [
        new ExtractTextPlugin("css/[name]-[hash:8].bundle.css", { allChunks: true }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ["app", "vendor", "polyfills"]
        }),
        new CleanWebpackPlugin(
            [
                "./app_build/js/",
                "./app_build/css/",
                "./app_build/assets/",
                "./app_build/index.html"
            ]
        ),
        // inject in index.html
        new HtmlWebpackPlugin({
            template: "./index.html",
            inject: "body"
        }),
        new BabiliPlugin({ comments: false }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ],
    devServer: {
        historyApiFallback: true,
        stats: "minimal"
    }
};