Javascript 缩小/丑化我的应用程序

我想在Chrome/Firefox中运行的应用程序是：

• 打字
• 使用react
• 使用es next功能（模块、导入等）编写
• 有一些是纯js文件的导入
• 网页第3页

我可以在不缩小的情况下很好地构建和运行我的应用程序，但当我尝试缩小/丑陋时，即使用

--优化最小化
调用webpack，我得到：

UglifyJs中的./dist/app.js出错
意外标记：name（App）[./src/App.tsx:34,0][./dist/App.js:40677,6]

这可能是什么原因造成的

我知道这可能是一个很难回答的问题，但我要找的是一个应用程序的配置，它使用与我相同的项目列表，以便我可以复制它。如何在浏览器中转换到当前Ecmascript并缩小我的应用程序？谢谢

这是我的webpack.config.js：

const resolve = require('path').resolve;
const webpack = require('webpack');

module.exports = {
  entry: "./src/app.tsx",
  output: {
      filename: "app.js",
      path: __dirname
  },

  devtool: 'source-map',

  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src')],
        exclude: [/node_modules/]
      },
      { test: /\.tsx?$/, include: /src/, loader: "awesome-typescript-loader" },
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
      { test: /\.css?$/, loader: "style-loader!css-loader" }
    ]
  },

  resolve: {
    alias: {
      'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
    },
    extensions: [".ts", ".tsx", ".js", ".json"]
  }
};

const resolve = require('path').resolve;
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = (env) => {
  const isDevBuild = !(env && env.prod);
  return {
    entry: "./src/app.tsx",
    output: {
        filename: "app.js",
        path: __dirname
    },

    devtool: 'source-map',

    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [resolve('src')],
          exclude: [/node_modules/]
        },
        { test: /\.tsx?$/, include: /src/, loader: "awesome-typescript-loader" },
        { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
        { test: /\.css?$/, loader: "style-loader!css-loader" }
      ]
    },

    resolve: {
      alias: {
        'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
      },
      extensions: [".ts", ".tsx", ".js", ".json"]
    },

    plugins: isDevBuild ? [
    ] : [
      new UglifyJSPlugin({
        sourceMap: true,
        uglifyOptions: {
          compress: false,
          mangle: true
        }
      })
    ]
  }
};

My tsconfig.json：

{
    "compilerOptions": {
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "esnext",
        "target": "esnext",
        "jsx": "react",
        "allowJs": true,
        "baseUrl": ".",
        "paths": {
            "*": ["src/typings/*", "*"]
        }
    },
    "include": [
        "./src/**/*"
    ]
}

My.lrc文件：

{
    "presets":  [
        ["env", {
            "modules": false,
            "forceAllTransforms": true
        }]
      ],
    "plugins": ["transform-object-assign"]
}

更新：
多亏了Niba的评论和Sebastian的帖子，我摆脱了
--optimize minimize
，安装了
uglifyjs网页包插件
，并将其添加到了我的webpack.config.js（见下文）。错误消失了，但是页面没有显示所有内容（特别是mapbox分幅），显示了一个不明确的
t is undefined
控制台错误。设置
compress:false
修复了这个问题，但是文件显然并没有尽可能小。有很多压缩选项，所以我觉得很难找到这个问题

我更新的webpack.config.js：

const resolve = require('path').resolve;
const webpack = require('webpack');

module.exports = {
  entry: "./src/app.tsx",
  output: {
      filename: "app.js",
      path: __dirname
  },

  devtool: 'source-map',

  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src')],
        exclude: [/node_modules/]
      },
      { test: /\.tsx?$/, include: /src/, loader: "awesome-typescript-loader" },
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
      { test: /\.css?$/, loader: "style-loader!css-loader" }
    ]
  },

  resolve: {
    alias: {
      'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
    },
    extensions: [".ts", ".tsx", ".js", ".json"]
  }
};

const resolve = require('path').resolve;
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = (env) => {
  const isDevBuild = !(env && env.prod);
  return {
    entry: "./src/app.tsx",
    output: {
        filename: "app.js",
        path: __dirname
    },

    devtool: 'source-map',

    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [resolve('src')],
          exclude: [/node_modules/]
        },
        { test: /\.tsx?$/, include: /src/, loader: "awesome-typescript-loader" },
        { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
        { test: /\.css?$/, loader: "style-loader!css-loader" }
      ]
    },

    resolve: {
      alias: {
        'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
      },
      extensions: [".ts", ".tsx", ".js", ".json"]
    },

    plugins: isDevBuild ? [
    ] : [
      new UglifyJSPlugin({
        sourceMap: true,
        uglifyOptions: {
          compress: false,
          mangle: true
        }
      })
    ]
  }
};

使用
--optimize minimize
将用于最小化代码。我的猜测是，默认配置试图最小化Es5总线，因为TypeScript的
目标设置为
esnext
，UglifyJS无法处理

您有两个选择：

将目标设定为ES5
使用（在您的网页配置中），将
ecma
设置为
8
或其他设置

尽管webpack的文档说
webpack.optimize.UglifyJsPlugin
在引擎盖下使用了
uglifyjs webpack插件
，但我不确定这是什么版本的webpack。另外，可能默认配置在您的情况下不起作用：）
请确保您使用的是一个良好的uglifyjs版本。有两个版本，一个用于es5，内置于Webpack-Webpack.optimize.UglifyJsPlugin中，另一个用于es6，作为一个单独的包分发-谢谢@niba，该插件让我更进一步（更新后）。您是否尝试过设置ECMA版本，如下面的回答所述？@SebastianSebald我尝试过，我尝试了ECMA5到8，分别使用了uglifyOptions和compress选项。不走运。你能上传你的项目的一个最小的例子，让我们可以检查它吗？谢谢塞巴斯蒂安。我尝试了你的两个建议，但运气不太好，但是在webpack.config.js中使用UglifyJsPlugin让我更接近了（更新后）。