醜化是不允許建立生產

Question

當我嘗試建立我的反應應用到生產，我發現了以下錯誤部署：

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

但試圖解決我注意到，醜化它的問題後，不承認我的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

試着用B abeli插件...也許你會比我更幸運..我發佈我的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" 
    } 
};