webpack 2：来自UglifyJs的./public/bundle.js中的错误意外字符''' [英] webpack 2: ERROR in ./public/bundle.js from UglifyJs Unexpected character '`'

问题描述

我遇到了2个相关问题：

I got 2 related issues:

首先：当我运行 npm run build bundle.js 文件没有缩小，但我得到一个 bundle.js.map 文件。

First: when I run npm run build the bundle.js file is not minified but I do get a bundle.js.map file.

第二：当我运行 webpack -d 我只得到一个缩小的 bundle.js 文件（并且没有错误）但是当我运行 webpack -p 然后我得到 bundle.js not 缩小， bundle.js.map ，以及这些错误：

Second: when I run webpack -d I only get a minified bundle.js file (and no error) but when I run webpack -p then I get a bundle.js that is not minified, a bundle.js.map, and those errors:

ERROR in ./public/bundle.js from UglifyJs
Unexpected character '`' [./app/config.js:5,0][./public/bundle.js:76,14]

ERROR in ./public/bundle.js from UglifyJs
Unexpected character '`' [./app/config.js:5,0][./public/bundle.js:76,14]

我的问题：

1. 不应该是 webpack -p 和 webpack -d 的行为是
   对面？


2. 为什么 bundle.js 没有缩小w如果我运行 npm run build ？


3. 为什么我会得到那些意外字符我在模块中使用模板字符串时的错误？

1. shouldn't the behaviors of webpack -p and webpack -d be the opposite?
2. why is bundle.js not minified when I run npm run build?
3. why do I get those Unexpected character errors when I use template strings in my modules?

package.json 看起来像这样：

{
  ...,
  "scripts": {
    "build": "webpack --progress --watch"
  },
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015-native-modules": "^6.9.4",
    "eslint": "^3.3.1",
    "eslint-config-airbnb": "^10.0.1",
    "eslint-plugin-html": "^1.5.2",
    "eslint-plugin-import": "^1.13.0",
    "eslint-plugin-jsx-a11y": "^2.1.0",
    "eslint-plugin-react": "^6.1.2",
    "webpack": "^2.1.0-beta.21"
  }
}

而 webpack.config.js 就是这样：

const webpack = require('webpack'); // eslint-disable-line import/no-extraneous-dependencies

const nodeEnv = process.env.NODE_ENV || 'production';

module.exports = {
  entry: {
    filename: './app/app.js'
  },
  output: {
    filename: './public/bundle.js'
  },
  modules: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015-native-modules']
        }
      }
    ]
  },
  devtool: 'source-map',
  plugins: [
    // uglify
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      output: { comments: false },
      sourceMap: true
    }),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
    })
  ]
};

我在这里和谷歌（以及webpack文档......）都搜索过但我找不到任何有用的东西对我来说。谢谢!!

I did search both here and Google (and webpack docs…) but I can't find anything useful to me. Thanks!!

推荐答案

UglifyJS2尚未在其版本中提供ES6 / Harmony支持。但是，Harmony分支允许您使用ES6语法缩小/ uglify文件。

UglifyJS2 does not have ES6/Harmony support in its releases yet. However, there's the Harmony branch which allows you to minify/uglify files with ES6 syntax.

我可以建议您一种替代解决方案，它可以帮助您减少构建时间所有ES6到ES5。

I can suggest you an alternative solution which could help you spend less build time to transpile all ES6 to ES5.

只需在package.json中指定UglifyJs，让npm处理依赖项。

uglify-js：git：//github.com/mishoo/UglifyJS2#harmony-v2.8.22，


Simply specify UglifyJs in your package.json, and let npm handles the dependencies. "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony-v2.8.22",

这篇关于webpack 2：来自UglifyJs的./public/bundle.js中的错误意外字符'''的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！