javascript - 缩小/丑化我的应用程序

Question

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

• 用 typescript 写
• 使用 React
• 使用 es 下一个功能(模块、导入等)编写
• 有一些导入是纯 js 文件
• 网页包 3

我可以在不缩小的情况下很好地构建和运行我的应用程序，但是当我尝试缩小/丑化时，即使用 --optimize-minimize 调用 webpack，我得到:

ERROR in ./dist/app.js from UglifyJs Unexpected token: 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"]
  }
};

我的 tsconfig.json:

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

我的 .babelrc 文件:

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

更新: 感谢 Niba 的评论和 Sebastian 的帖子，我摆脱了 --optimize-minimize 并安装了 uglifyjs-webpack-plugin 并将其添加到我的 webpack.config 中。 js(下)。错误消失了，但是页面没有显示所有内容(特别是 mapbox tiles)，显示了一个模棱两可的 t is undefined 控制台错误。设置 compress: false 解决了这个问题，但是文件显然没有想象的那么小。有很多压缩选项，所以我觉得很难找到这个问题。

我更新的 webpack.config.js:

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
        }
      })
    ]
  }
};

Answer 1

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

你有两个选择:

1. 将目标设置为 ES5
2. 玩configuration (在你的 webpack 配置中)，将 ecma 设置为 8 或其他。

---

尽管 webpack 的文档说 webpack.optimize.UglifyJsPlugin 在后台使用了 uglifyjs-webpack-plugin，但我不确定它是哪个版本的 webpack .此外，也许默认配置在您的情况下不起作用:)