Question

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

用打字稿写成
使用反应
用es下一个功能（模块，导入等）编写
有一些普通的js文件导入
webpack 3

我可以在不缩小的情况下构建和运行我的应用程序，但是当我尝试缩小/ uglify时，我会使用--optimize-minimize调用webpack，我得到：

来自UglifyJs的./dist/app.js中的错误意外的令牌：名称（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（下面）。错误消失但页面没有显示所有内容（特别是地图框图块），显示模糊的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无法处理。

您有两种选择：

将目标设为ES5
使用configuration（在您的网络包配置中）进行游戏，将ecma设置为8或其他内容。

即使webpack的文档说明webpack.optimize.UglifyJsPlugin使用了uglifyjs-webpack-plugin，我也不确定是哪个版本的webpack。此外，可能默认配置在您的情况下不起作用：）

缩小/重新整理我的应用

1 个答案: