egghead.io - Angular、Webpack 和 UglifyJs 教程 - 意外令牌答案

【问题标题】：egghead.io - Angular, Webpack and UglifyJs Tutorial - Unexpected Tokenegghead.io - Angular、Webpack 和 UglifyJs 教程 - 意外令牌
【发布时间】：2017-06-22 16:56:45
【问题描述】：

我想解决我的问题。我正在 Egghead.io 中做教程，但我无法运行 npm run build。

接下来的代码是终端控制台中的错误

ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [bundle.js:83,72]

楼主可以用 webpack 和 uglifyJs 运行 babel，但是我做不到。因此，如果 ES6 和 Uglify-Js 之间存在问题，就像大多数条目都说这个错误一样。

这是我的 webpack.config.js：

var webpack = require('webpack');

var config = {
  context: __dirname + '/app',
  entry:  './index.js',
  output:{
    path: __dirname + '/app',
    filename: 'bundle.js'
  },
  plugins:[
    new webpack.DefinePlugin({
      ON_TEST: process.env.NODE_ENV =='test'
    })
  ],
  module:{
    loaders:[
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
      { test: /\.html$/, loader: 'raw-loader', exclude: /node_modules/},
      { test: /\.css$/, loader: 'style-loader!css-loader', exclude: /node_modules/},
      { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader', exclude: /node_modules/}
    ]
  }
}

if (process.env.NODE_ENV === 'production'){
  config.output.path = __dirname + '/dist';
  config.plugins.push(new webpack.optimize.UglifyJsPlugin());
}

module.exports = config;

这是我的 package.json 文件：

{
  "name": "webpack-angular",
  "version": "1.0.0",
  "description": "Example of using webpack",
  "main": "app/index.js",
  "scripts": {
    "test": "NODE_ENV=test karma start",
    "start": "node node_modules/.bin/webpack-dev-server --content-base app",
    "build": "NODE_ENV=production node node_modules/.bin/webpack && cp app/index.html dist/index.html"
  },
  "keywords": [
    "webpack",
    "angular",
    "egghead.io"
  ],
  "author": "Pablo B.",
  "license": "MIT",
  "devDependencies": {
    "angular-mocks": "^1.6.1",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "chai": "^3.5.0",
    "css-loader": "^0.26.1",
    "http-server": "^0.9.0",
    "karma": "^1.4.1",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-mocha": "^1.3.0",
    "karma-webpack": "^2.0.2",
    "mocha": "^3.2.0",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.13.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^2.4.0",
    "uglify-js": "^2.7.5",
    "webpack": "fulls1z3/webpack#v2.1.0-beta.27-harmony",
    "webpack-dev-server": "^1.16.2"
  }
}

有什么想法吗？

亲切的问候，

巴勃罗。

【问题讨论】：

标签： webpack ecmascript-6 babeljs uglifyjs

【解决方案1】：

我自己修好了

我在根文件夹中创建了一个 .babelrc 文件。

{
  presets:["es2015"]
}

我已经通过 npm 安装了“babel-preset-es2015”包。

最后我遇到了 source-map 的问题，然后我把问题在https://github.com/shama/webpack-stream/issues/81 中的属性config.plugins.push(new webpack.optimize.UglifyJsPlugin({ sourceMap: true }))

【讨论】：