javascript - 如何使用 Webpack 丑化 Typescript 文件

Question

在我必须缩小输出包之前，我有一个 webpack 配置可以与 typescript 完美配合。我有一个正在逐步更新为 typescript 的项目——目前有一个文件已迁移到 typescript ，当我运行 babel-node 和我的开发包(不使用 Uglify 来缩小 js)时它可以正常工作。但是，一旦我运行我的产品包，我就会收到以下错误:

ERROR in main.ab0b2e37030c63351bb8.js from UglifyJs
SyntaxError: Unexpected token: name (App) [./components/App.ts:12,0]

这是我的 webpack 配置:

const config = {
  context: ROOT,

  output: {
    path: path.resolve(__dirname, '../build/public/assets'),
    publicPath: '/assets/',
    sourcePrefix: '  ',
  },

  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader"
      },
      {
        enforce: "pre",
        test: /\.js$/,
        loader: "source-map-loader"
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: [
          ROOT
        ],
        query: {
          cacheDirectory: DEBUG,

          babelrc: false,
          presets: [
            'react',
            'es2015',
            'stage-0',
          ],
          plugins: [
            'transform-runtime',
            [
              'react-css-modules',
              {
                context: ROOT,
                generateScopedName: CSS_SCOPE_NAME
              }
            ],
            'transform-decorators-legacy',
            ...DEBUG ? [] : [
              'transform-react-remove-prop-types',
              'transform-react-constant-elements',
              'transform-react-inline-elements'
            ],
          ],
        },
      },
      {
        test: /\.css/,
        loaders: [
          'isomorphic-style-loader',
          `css-loader?${JSON.stringify({
            sourceMap: DEBUG,
            modules: true,
            importLoaders: 1,
            localIdentName: CSS_SCOPE_NAME,
            minimize: !DEBUG,
          })}`,
          'postcss-loader?pack=default',
        ],
      },
      {
        test: /\.scss$/,
        loaders: [
          'isomorphic-style-loader',
          `css-loader?${JSON.stringify({ sourceMap: DEBUG, minimize: !DEBUG })}`,
          'postcss-loader?pack=sass',
          'sass-loader',
        ],
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
      {
        test: /\.txt$/,
        loader: 'raw-loader',
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: 'url-loader',
        query: {
          name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
          limit: 10000,
        },
      },
      {
        test: /\.(eot|ttf|wav|mp3)$/,
        loader: 'file-loader',
        query: {
          name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
        },
      },
    ],
  },

  resolve: {
    root: ROOT,
    modulesDirectories: ['node_modules'],
    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json', '.ts', '.tsx'],
  },

  cache: DEBUG,
  debug: DEBUG,

  stats: {
    colors: true,
    reasons: DEBUG,
    hash: VERBOSE,
    version: VERBOSE,
    timings: true,
    chunks: VERBOSE,
    chunkModules: VERBOSE,
    cached: VERBOSE,
    cachedAssets: VERBOSE,
    errorDetails: true
  }
  
};

const clientConfig = _.merge(true, {}, config, {
  entry: './client.js',

  output: {
    filename: DEBUG ? '[name].js?[chunkhash]' : '[name].[chunkhash].js',
    chunkFilename: DEBUG ? '[name].[id].js?[chunkhash]' : '[name].[id].[chunkhash].js',
  },

  target: 'web',

  plugins: [

    new webpack.DefinePlugin({ ...GLOBALS, 'process.env.BROWSER': true }),

    new AssetsPlugin({
      path: path.resolve(__dirname, '../build'),
      filename: 'assets.js',
      processOutput: x => `module.exports = ${JSON.stringify(x)};`,
    }),

    new webpack.optimize.OccurrenceOrderPlugin(true),

    ...DEBUG ? [] : [

      new webpack.optimize.DedupePlugin(),

      new webpack.optimize.UglifyJsPlugin({
        compress: {
          screw_ie8: true, // jscs:ignore requireCamelCaseOrUpperCaseIdentifiers
          warnings: VERBOSE,
        },
      }),

      new webpack.optimize.AggressiveMergingPlugin(),
    ],
  ],

  devtool: DEBUG ? 'source-map' : false,
});

App.ts 看起来像这样:

import * as React from 'react';
import { PropTypes } from 'react';
import { connect } from 'react-redux';

const ContextType = {
  store: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired,
  insertCss: PropTypes.func.isRequired,
};


class App extends React.Component<any, any> {

  static propTypes = {
    context: PropTypes.shape(ContextType).isRequired,
    children: PropTypes.element.isRequired,
  };

  static childContextTypes = ContextType;

  constructor(props: any) {
    super(props);
  }

  getChildContext() {
    return this.props.context;
  }

  render() {
    return React.Children.only(this.props.children);
  }

}

export default App

Answer 1

那是因为目前 UglifyJsPlugin 仅适用于 es5，而您可能正在使用 es6 或 es2017。检查你的 tsconfig.json 文件并确保它被设置为使用 es5