From 99a55a9272cbaad205b8d3cdba84ded09b268ee0 Mon Sep 17 00:00:00 2001 From: John Reilly Date: Wed, 20 Sep 2017 06:53:47 +0100 Subject: [PATCH 1/4] Add support for fork-ts-checker-webpack-plugin --- packages/react-scripts/config/paths.js | 1 + .../config/webpack.config.dev.js | 26 +++++++++++------- .../config/webpack.config.prod.js | 27 ++++++++++++------- packages/react-scripts/package.json | 2 +- 4 files changed, 36 insertions(+), 20 deletions(-) diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index e860d9b04..0d85ff15b 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -114,6 +114,7 @@ if ( testsSetup: resolveOwn('template/src/setupTests.ts'), appNodeModules: resolveOwn('node_modules'), appTsConfig: resolveOwn('template/tsconfig.json'), + appTsLint: resolveOwn('template/tslint.json'), appTsTestConfig: resolveOwn('template/tsconfig.test.json'), publicUrl: getPublicUrl(resolveOwn('package.json')), servedPath: getServedPath(resolveOwn('package.json')), diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 07c0a3adf..6c619f4f4 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -18,6 +18,7 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); const getClientEnvironment = require('./env'); const paths = require('./paths'); @@ -134,14 +135,6 @@ module.exports = { // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176. // { parser: { requireEnsure: false } }, - // First, run the linter. - // It's important to do this before Babel processes the JS. - { - test: /\.(ts|tsx)$/, - loader: require.resolve('tslint-loader'), - enforce: 'pre', - include: paths.appSrc, - }, { test: /\.js$/, loader: require.resolve('source-map-loader'), @@ -168,7 +161,15 @@ module.exports = { { test: /\.(ts|tsx)$/, include: paths.appSrc, - loader: require.resolve('ts-loader'), + use: [ + { + loader: require.resolve('ts-loader'), + options: { + // disable type checker - we will use it in fork plugin + transpileOnly: true, + }, + }, + ], }, // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. @@ -262,6 +263,13 @@ module.exports = { // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack // You can remove this if you don't use Moment.js: new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), + // Perform type checking and linting in a separate process to speed up compilation + new ForkTsCheckerWebpackPlugin({ + async: false, + watch: paths.appSrc, + tsconfig: paths.appTsConfig, + tslint: paths.appTsLint, + }), ], // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 9582ee731..a3a3da9ca 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -19,6 +19,7 @@ const ManifestPlugin = require('webpack-manifest-plugin'); const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); const paths = require('./paths'); const getClientEnvironment = require('./env'); @@ -138,14 +139,6 @@ module.exports = { // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176. // { parser: { requireEnsure: false } }, - // First, run the linter. - // It's important to do this before Typescript runs. - { - test: /\.(ts|tsx)$/, - loader: require.resolve('tslint-loader'), - enforce: 'pre', - include: paths.appSrc, - }, { test: /\.js$/, loader: require.resolve('source-map-loader'), @@ -167,11 +160,19 @@ module.exports = { name: 'static/media/[name].[hash:8].[ext]', }, }, - //Compile .tsx? + // Compile .tsx? { test: /\.(ts|tsx)$/, include: paths.appSrc, - loader: require.resolve('ts-loader') + use: [ + { + loader: require.resolve('ts-loader'), + options: { + // disable type checker - we will use it in fork plugin + transpileOnly: true, + }, + }, + ], }, // The notation here is somewhat confusing. // "postcss" loader applies autoprefixer to our CSS. @@ -341,6 +342,12 @@ module.exports = { // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack // You can remove this if you don't use Moment.js: new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), + // Perform type checking and linting in a separate process to speed up compilation + new ForkTsCheckerWebpackPlugin({ + async: false, + tsconfig: paths.appTsConfig, + tslint: paths.appTsLint, + }), ], // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 7d690ff5e..8af214eb6 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -28,6 +28,7 @@ "dotenv": "4.0.0", "extract-text-webpack-plugin": "3.0.0", "file-loader": "0.11.2", + "fork-ts-checker-webpack-plugin": "^0.2.8", "fs-extra": "3.0.1", "html-webpack-plugin": "2.29.0", "jest": "20.0.4", @@ -40,7 +41,6 @@ "ts-jest": "^20.0.7", "ts-loader": "^2.2.1", "tslint": "^5.2.0", - "tslint-loader": "^3.5.3", "tslint-react": "^3.0.0", "typescript": "~2.4.0", "source-map-loader": "^0.2.1", From f23bf4b9ae830982cf42f8dd626ef9f55b7bcabc Mon Sep 17 00:00:00 2001 From: John Reilly Date: Thu, 21 Sep 2017 19:54:00 +0100 Subject: [PATCH 2/4] Add missing paths as per https://github.com/wmonk/create-react-app-typescript/pull/165#issuecomment-331136879 --- packages/react-scripts/config/paths.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index 0d85ff15b..0f7f5cdb6 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -61,6 +61,7 @@ module.exports = { testsSetup: resolveApp('src/setupTests.ts'), appNodeModules: resolveApp('node_modules'), appTsConfig: resolveApp('tsconfig.json'), + appTsLint: resolveApp('tslint.json'), publicUrl: getPublicUrl(resolveApp('package.json')), servedPath: getServedPath(resolveApp('package.json')), }; @@ -83,6 +84,7 @@ module.exports = { appNodeModules: resolveApp('node_modules'), appTsConfig: resolveApp('tsconfig.json'), appTsTestConfig: resolveApp('tsconfig.test.json'), + appTsLint: resolveApp('tslint.json'), publicUrl: getPublicUrl(resolveApp('package.json')), servedPath: getServedPath(resolveApp('package.json')), // These properties only exist before ejecting: From fdcdcbefa47e79cd9e884af59c5855b3d21de6fc Mon Sep 17 00:00:00 2001 From: John Reilly Date: Wed, 22 Nov 2017 15:55:49 +0000 Subject: [PATCH 3/4] Update package.json --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 9fa9e956d..e845e49b4 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -50,7 +50,7 @@ "tslint": "^5.8.0", "tslint-react": "^3.2.0", "typescript": "~2.6.1", - "source-map-loader": "^0.2.3" + "source-map-loader": "^0.2.3", "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.6.2", "webpack": "3.8.1", From 91d74f09201ab0484218cdc5c16411f4e178dd4f Mon Sep 17 00:00:00 2001 From: John Reilly Date: Wed, 22 Nov 2017 15:57:18 +0000 Subject: [PATCH 4/4] preserve package.json order --- packages/react-scripts/package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index e845e49b4..1f953c07e 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -45,18 +45,18 @@ "raf": "3.4.0", "react-dev-utils": "^4.2.1", "style-loader": "0.19.0", - "ts-jest": "^21.1.4", - "ts-loader": "^3.1.1", - "tslint": "^5.8.0", - "tslint-react": "^3.2.0", - "typescript": "~2.6.1", - "source-map-loader": "^0.2.3", "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.6.2", "webpack": "3.8.1", "webpack-dev-server": "2.9.4", "webpack-manifest-plugin": "1.3.2", "whatwg-fetch": "2.0.3", + "ts-jest": "^21.1.4", + "ts-loader": "^3.1.1", + "tslint": "^5.8.0", + "tslint-react": "^3.2.0", + "typescript": "~2.6.1", + "source-map-loader": "^0.2.3" }, "devDependencies": { "react": "^16.0.0",