reactjs - React + react-router + typescript webpack production bundle issue -
i'm building app using react + react-router + redux + typescript + webpack, here's tsconfig.json:
{ "compileroptions": { "outdir": "./dist/", "sourcemap": true, "noimplicitany": true, "module": "commonjs", "target": "es6", "jsx": "react" }, "files": [ "./src/index.tsx" ] }
and webpack.config.js looks like:
var prod = json.parse(process.env.prod_env || '0'); ... module.exports = { ... plugins: prod ? [ new webpack.optimize.uglifyjsplugin({ compress: { warnings: false } }) ] : [], ... module: { loaders: [ // sass loader stylesheet. { test: /\.scss$/, loaders: ["style", "css", "sass"], exclude: /node_modules/ }, // files '.ts' or '.tsx' extension handled 'ts-loader'. { test: /\.tsx?$/, loaders: ["babel-loader", "ts-loader"], exclude: /node_modules/ }, ], preloaders: [ // output '.js' files have sourcemaps re-processed 'source-map-loader'. { test: /\.js$/, loader: "source-map-loader" } ] }, externals: { "react": "react", "react-dom": "reactdom", "react-router": "reactrouter", "redux": "redux", "react-redux": "reactredux" }, }
now if use webpack bundle, looks fine, if run
prod_env=1 webpack
to try generate uglified js bundle file, gives me following error compilation message:
error in ./dist/bundle.js uglifyjs syntaxerror: unexpected token: name (approutes) [./src/routes.tsx:8,0]
any appreciated! thanks.
uglifyjs uses it's own es5 parser. it's quite possible parse , transform babel, parse , transform webpack , still produce source code not going supported uglifyjs's parser.
usually means going whatever loader produced input module sources webpack , making sure es5 compliant. configure {debug: true}
uglifyjs plugin , find illegal es5 syntax in bundle.
if loaders produce same output in development , production, can create development bundle , run uglifyjs command line or paste ast explorer , use provided uglify-js
parser.
alternatively, might try babili
, see how works you.
Comments
Post a Comment