如何使用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