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

尝试生成uglified 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} ，并在捆绑包中找到非法的ES5语法。

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

另外，您也可以尝试babili ，看看它如何工作。