0
我有一個webpack配置，與打字稿完美合作，直到我必須縮小輸出包。我有一個正在逐步更新到打字稿的項目 - 目前一個文件已經遷移到打字稿，並且當我運行babel-node和我的開發包（它不使用Uglify來縮小js）時它正常工作。然而，當我跑我的督促包，我得到以下錯誤：如何Uglify使用Webpack的打字稿文件
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
你爲什麼試圖uglify你的TS文件？你應該醜化它產生的JS，除非我失去了一些東西？ –
是的，這正是我想要做的 - 醜化它生成的JS。我不確定它爲什麼試圖醜化打字稿文件。 – asuna
可悲的是我不知道WebPack，所以不知道你的配置文件隊友中是否有錯誤。希望有人認識WebPack會有幫助。 –