wmonk / create-react-app-typescript

DEPRECATED: Create React apps using typescript with no build configuration.
3.7k stars 492 forks source link

different tsconfig compiler options when building the production bundle. #218

Open pgherveou opened 6 years ago

pgherveou commented 6 years ago

Hey there, thanks for this awesome module. Quick question, is it possible to specify additional/different tsconfig compiler options when building the production bundle. I would like to set the target to es2017 in dev for example, and es5 in production.

StanleyGoldman commented 6 years ago

Did you ever find the answer to this? I'm seeking the same thing...

StanleyGoldman commented 6 years ago

In particular, as much as I love the option noUnusedLocals as build time. But the option makes it really hard when you are actively developing.

mbrowne commented 6 years ago

It doesn't look like it's possible to change which tsconfig file is used without ejecting, so I guess you'd have to eject in order to set a different compiler target for production.

@StanleyGoldman I found that option really distracting while developing as well. My solution was to disable the noUnusedLocals option in tsconfig and use tslint for that instead (the no-unused-variable rule).

But I only wanted to disable it during development, not production. So I followed the recommendation in #238 and set CI=true for the build script in package.json:

"build": "cross-env CI=true react-scripts-ts build"

(cross-env is just a way of setting an environment variable that works on Linux/Mac/Windows...if you don't care about Windows then you could just do "build": "cross-env CI=true react-scripts-ts build")

As explained in #238, this approach also requires adding "defaultSeverity": "warning" to tslint.json.


That's all you need for a basic setup. But I also wanted a precommit hook so that it wasn't possible to commit changes that hadn't passed tslint. This took a little more work...first I created a separate tslint config file called tslint-precommit.json (you could call it anything other than tslint.json):

{
  "extends": ["./tslint.json"],
  "defaultSeverity": "error"
}

Then I used lint-staged so that the precommit hook would only run tslint on files that have been staged in git. The lint-staged config should include:

"lint-staged": {
  // other linters here (if you want)...
  "*.{ts,tsx}": ["tslint -c tslint-precommit.json --project ."],
}

Now, assuming you have husky or similar set up to actually run the precommit hook, you should get an error when trying to commit any files with unused variables, but during development unused variables will only trigger a warning. Any files not staged to git will be ignored (even if they have linting errors).

elektronik2k5 commented 6 years ago

@mbrowne those are good solutions! :ok_hand:

wmonk commented 6 years ago

Hey, I think this will be fixed in https://github.com/wmonk/create-react-app-typescript/pull/299 - can you confirm and close. Thanks!

mbrowne commented 6 years ago

I think this can be closed now, thanks to #323 (and #299)