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", pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy