diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index c397bb431..4a0163773 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -59,6 +59,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')),
};
@@ -81,6 +82,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:
@@ -112,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 f24e0ac46..3cf137781 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -16,6 +16,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');
@@ -120,14 +121,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'),
@@ -154,7 +147,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,
+ },
+ },
+ ],
},
// Process JS with Babel.
{
@@ -264,6 +265,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 a9d9e13e0..8badecf54 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -17,6 +17,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');
@@ -125,15 +126,6 @@ module.exports = {
// TODO: Disable require.ensure as it's not a standard language feature.
// 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'),
@@ -155,11 +147,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,
+ },
+ },
+ ],
},
// Process JS with Babel.
{
@@ -350,6 +350,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 734bdf8b1..1f953c07e 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -34,6 +34,7 @@
"dotenv": "4.0.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
+ "fork-ts-checker-webpack-plugin": "^0.2.8",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
@@ -53,7 +54,6 @@
"ts-jest": "^21.1.4",
"ts-loader": "^3.1.1",
"tslint": "^5.8.0",
- "tslint-loader": "^3.5.3",
"tslint-react": "^3.2.0",
"typescript": "~2.6.1",
"source-map-loader": "^0.2.3"