React + react-router + typescript webpack 生产包问题

Question

我正在使用 React + react-router + redux + typescript + webpack 构建一个应用程序，这是我的 tsconfig.json：

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    },  
    "files": [
        "./src/index.tsx"
    ]
}

这是我的 webpack.config.js 样子：

var PROD = JSON.parse(process.env.PROD_ENV || '0');
...
module.exports = {
    ...
    plugins: PROD ? [
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false }
        })
    ] : [],
    ...
    module: {
        loaders: [
            // Sass loader for stylesheet.
            { test: /\.scss$/, loaders: ["style", "css", "sass"], exclude: /node_modules/ },
            // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
            { test: /\.tsx?$/, loaders: ["babel-loader", "ts-loader"], exclude: /node_modules/ },
        ],

        preLoaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM",
        "react-router": "ReactRouter",
        "redux": "Redux",
        "react-redux": "ReactRedux"
    },
}

现在如果我使用 webpack 打包，一切看起来都很好，但是如果我运行

PROD_ENV=1 webpack

尝试生成丑化的 js 包文件，它给我以下错误编译信息：

ERROR in ./dist/bundle.js from UglifyJs
SyntaxError: Unexpected token: name (AppRoutes) [./src/routes.tsx:8,0]

如有任何帮助，我们将不胜感激！谢谢

Answer 1

UglifyJS 使用它自己的 ES5 解析器。很可能您使用 Babel 进行解析和转换，使用 Webpack 进行解析和转换，并且仍然生成 UglifyJS 的解析器不支持的源代码。

通常这意味着回到为 Webpack 生成输入模块源的任何加载器，并确保一切都符合 ES5。配置UglifyJS插件{debug: true}，在bundle中发现非法ES5语法

如果您的加载器在开发和生产中产生相同的输出，那么您可以从命令行创建开发包和运行 UglifyJS 或将其粘贴到 AST Explorer 并使用提供的 uglify-js解析器。

或者，您可以尝试 babili 看看它对您有何作用。

React + react-router + typescript webpack 生产包问题

React + react-router + typescript webpack production bundle issue

uglifyjs

typescript

ecmascript-6

reactjs

webpack