如何使用Webpack压缩Typescript文件

Question

我有一个webpack配置，可以与打字稿完美配合，直到必须缩小输出包为止。 我有一个项目正在逐步更新为打字稿-当前一个文件已迁移到打字稿，并且当我运行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