[TypeScript] Support tsconfig.prod.json and tslint.prod.json

facebook · Aug 10, 2018 · f33e0ca · f33e0ca
1 parent b343104
commit f33e0ca
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 22 deletions.
diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
@@ -47,9 +47,13 @@ function getServedPath(appPackageJson) {
   return ensureSlash(servedUrl, true);
 }
 
-const isFlow = fs.existsSync(resolveApp('.flowconfig'));
-const isTypeScript = fs.existsSync(resolveApp('tsconfig.json'));
-const useTSLint = isTypeScript && fs.existsSync(resolveApp('tslint.json'));
+const hasTSConfig = fs.existsSync(resolveApp('tsconfig.json'));
+const hasTSConfigProd = fs.existsSync(resolveApp('tsconfig.prod.json'));
+
+const hasTSLint = fs.existsSync(resolveApp('tslint.json'));
+const hasTSLintProd = fs.existsSync(resolveApp('tslint.prod.json'));
+
+const isTypeScript = hasTSConfig;
 
 // config after eject: we're in ./config/
 module.exports = {
@@ -58,13 +62,19 @@ module.exports = {
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveApp(isTypeScript ? 'src/index.tsx' : 'src/index.js'),
+  appIndexJs: isTypeScript
+    ? resolveApp('src/index.tsx')
+    : resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
-  testsSetup: resolveApp(
-    isTypeScript ? 'src/setupTests.ts' : 'src/setupTests.js'
-  ),
+  testsSetup: isTypeScript
+    ? resolveApp('src/setupTests.ts')
+    : resolveApp('src/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),
+  appTSConfig: resolveApp('tsconfig.json'),
+  appTSConfigProd: resolveApp('tsconfig.prod.json'),
+  appTSLint: resolveApp('tslint.json'),
+  appTSLintProd: resolveApp('tslint.prod.json'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
   servedPath: getServedPath(resolveApp('package.json')),
 };
@@ -81,13 +91,19 @@ module.exports = {
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveApp(isTypeScript ? 'src/index.tsx' : 'src/index.js'),
+  appIndexJs: isTypeScript
+    ? resolveApp('src/index.tsx')
+    : resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
-  testsSetup: resolveApp(
-    isTypeScript ? 'src/setupTests.ts' : 'src/setupTests.js'
-  ),
+  testsSetup: isTypeScript
+    ? resolveApp('src/setupTests.ts')
+    : resolveApp('src/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),
+  appTSConfig: resolveApp('tsconfig.json'),
+  appTSConfigProd: resolveApp('tsconfig.prod.json'),
+  appTSLint: resolveApp('tslint.json'),
+  appTSLintProd: resolveApp('tslint.prod.json'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
   servedPath: getServedPath(resolveApp('package.json')),
   // These properties only exist before ejecting:
@@ -108,15 +124,19 @@ if (useTemplate) {
     appBuild: resolveOwn('../../build'),
     appPublic: resolveOwn('template/public'),
     appHtml: resolveOwn('template/public/index.html'),
-    appIndexJs: resolveOwn(
-      isTypeScript ? 'template/src/index.tsx' : 'template/src/index.js'
-    ),
+    appIndexJs: isTypeScript
+      ? resolveOwn('template/src/index.tsx')
+      : resolveOwn('template/src/index.js'),
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn('template/src'),
-    testsSetup: resolveOwn(
-      isTypeScript ? 'template/src/setupTests.ts' : 'template/src/setupTests.js'
-    ),
+    testsSetup: isTypeScript
+      ? resolveOwn('template/src/setupTests.ts')
+      : resolveOwn('template/src/setupTests.js'),
     appNodeModules: resolveOwn('node_modules'),
+    appTSConfig: resolveOwn('template/tsconfig.json'),
+    appTSConfigProd: resolveOwn('template/tsconfig.prod.json'),
+    appTSLint: resolveOwn('template/tslint.json'),
+    appTSLintProd: resolveOwn('template/tslint.prod.json'),
     publicUrl: getPublicUrl(resolveOwn('package.json')),
     servedPath: getServedPath(resolveOwn('package.json')),
     // These properties only exist before ejecting:
@@ -128,11 +148,11 @@ if (useTemplate) {
 
 module.exports.srcPaths = [module.exports.appSrc];
 
-module.exports.isFlow = isFlow;
-
 module.exports.isTypeScript = isTypeScript;
+module.exports.useTSConfigProd = isTypeScript && hasTSConfigProd;
 
-module.exports.useTSLint = useTSLint;
+module.exports.useTSLint = isTypeScript && hasTSLint;
+module.exports.useTSLintProd = isTypeScript && hasTSLintProd;
 
 module.exports.useYarn = fs.existsSync(
   path.join(module.exports.appPath, 'yarn.lock')

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
@@ -410,8 +410,9 @@ module.exports = {
     paths.isTypeScript &&
       new ForkTsCheckerWebpackPlugin({
         async: false,
+        tsconfig: paths.appTSConfig,
+        tslint: paths.useTSLint ? paths.appTSLint : undefined,
         watch: paths.appSrc,
-        tslint: paths.useTSLint,
       }),
   ].filter(Boolean),
 

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
@@ -482,8 +482,15 @@ module.exports = {
     paths.isTypeScript &&
       new ForkTsCheckerWebpackPlugin({
         async: false,
+        tsconfig: paths.useTSConfigProd
+          ? paths.appTSConfigProd
+          : paths.appTSConfig,
+        tslint: paths.useTSLintProd
+          ? paths.appTSLintProd
+          : paths.useTSLint
+            ? paths.appTSLint
+            : undefined,
         watch: paths.appSrc,
-        tslint: paths.useTSLint,
       }),
   ].filter(Boolean),
   // Some libraries import Node modules but don't use them in the browser.

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
@@ -949,6 +949,8 @@ To add TypeScript to a Create React App project, follow these steps:
 }
 ```
 
+_Note: `tsconfig.prod.json` is also supported._
+
 4. [optional] Setup TSLint
 
     1. Create a `tslint.json` file with the following content:
@@ -976,6 +978,8 @@ To add TypeScript to a Create React App project, follow these steps:
     }
     ```
 
+    _Note: `tslint.prod.json` is also supported._
+
     2. Run `npm install --dev tslint-react tslint-config-prettier` (or `yarn add --dev tslint-react tslint-config-prettier`).
 
 Type errors will show up in the console.