Skip to content
This repository was archived by the owner on Jan 26, 2019. It is now read-only.

Commit 9e4589f

Browse files
wmonkwmonk
committed
Merge pull request #165 from johnnyreilly/master
Add support for fork-ts-checker-webpack-plugin
1 parent 2c25d89 commit 9e4589f

File tree

4 files changed

+71
-39
lines changed

4 files changed

+71
-39
lines changed

‎packages/react-scripts/config/paths.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ const getPublicUrl = appPackageJson =>
4343
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
4444
function getServedPath(appPackageJson) {
4545
const publicUrl = getPublicUrl(appPackageJson);
46-
const servedUrl =
47-
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
46+
const servedUrl = envPublicUrl ||
47+
(publicUrl ? url.parse(publicUrl).pathname : '/');
4848
return ensureSlash(servedUrl, true);
4949
}
5050

@@ -61,6 +61,7 @@ module.exports = {
6161
testsSetup: resolveApp('src/setupTests.ts'),
6262
appNodeModules: resolveApp('node_modules'),
6363
appTsConfig: resolveApp('tsconfig.json'),
64+
appTsLint: resolveApp('tslint.json'),
6465
publicUrl: getPublicUrl(resolveApp('package.json')),
6566
servedPath: getServedPath(resolveApp('package.json')),
6667
};
@@ -83,6 +84,7 @@ module.exports = {
8384
appNodeModules: resolveApp('node_modules'),
8485
appTsConfig: resolveApp('tsconfig.json'),
8586
appTsTestConfig: resolveApp('tsconfig.test.json'),
87+
appTsLint: resolveApp('tslint.json'),
8688
publicUrl: getPublicUrl(resolveApp('package.json')),
8789
servedPath: getServedPath(resolveApp('package.json')),
8890
// These properties only exist before ejecting:
@@ -92,8 +94,7 @@ module.exports = {
9294

9395
const ownPackageJson = require('../package.json');
9496
const reactScriptsPath = resolveApp(`node_modules/${ownPackageJson.name}`);
95-
const reactScriptsLinked =
96-
fs.existsSync(reactScriptsPath) &&
97+
const reactScriptsLinked = fs.existsSync(reactScriptsPath) &&
9798
fs.lstatSync(reactScriptsPath).isSymbolicLink();
9899

99100
// config before publish: we're in ./packages/react-scripts/config/
@@ -114,6 +115,7 @@ if (
114115
testsSetup: resolveOwn('template/src/setupTests.ts'),
115116
appNodeModules: resolveOwn('node_modules'),
116117
appTsConfig: resolveOwn('template/tsconfig.json'),
118+
appTsLint: resolveOwn('template/tslint.json'),
117119
appTsTestConfig: resolveOwn('template/tsconfig.test.json'),
118120
publicUrl: getPublicUrl(resolveOwn('package.json')),
119121
servedPath: getServedPath(resolveOwn('package.json')),

‎packages/react-scripts/config/webpack.config.dev.js

+17-9
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
1818
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
1919
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
2020
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
21+
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
2122
const getClientEnvironment = require('./env');
2223
const paths = require('./paths');
2324

@@ -134,14 +135,6 @@ module.exports = {
134135
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
135136
// { parser: { requireEnsure: false } },
136137

137-
// First, run the linter.
138-
// It's important to do this before Babel processes the JS.
139-
{
140-
test: /\.(ts|tsx)$/,
141-
loader: require.resolve('tslint-loader'),
142-
enforce: 'pre',
143-
include: paths.appSrc,
144-
},
145138
{
146139
test: /\.js$/,
147140
loader: require.resolve('source-map-loader'),
@@ -168,7 +161,15 @@ module.exports = {
168161
{
169162
test: /\.(ts|tsx)$/,
170163
include: paths.appSrc,
171-
loader: require.resolve('ts-loader'),
164+
use: [
165+
{
166+
loader: require.resolve('ts-loader'),
167+
options: {
168+
// disable type checker - we will use it in fork plugin
169+
transpileOnly: true,
170+
},
171+
},
172+
],
172173
},
173174
// "postcss" loader applies autoprefixer to our CSS.
174175
// "css" loader resolves paths in CSS and adds assets as dependencies.
@@ -262,6 +263,13 @@ module.exports = {
262263
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
263264
// You can remove this if you don't use Moment.js:
264265
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
266+
// Perform type checking and linting in a separate process to speed up compilation
267+
new ForkTsCheckerWebpackPlugin({
268+
async: false,
269+
watch: paths.appSrc,
270+
tsconfig: paths.appTsConfig,
271+
tslint: paths.appTsLint,
272+
}),
265273
],
266274
// Some libraries import Node modules but don't use them in the browser.
267275
// Tell Webpack to provide empty mocks for them so importing them works.

‎packages/react-scripts/config/webpack.config.prod.js

+17-3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const ManifestPlugin = require('webpack-manifest-plugin');
1919
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
2020
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
2121
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
22+
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
2223
const paths = require('./paths');
2324
const getClientEnvironment = require('./env');
2425

@@ -137,7 +138,6 @@ module.exports = {
137138
// TODO: Disable require.ensure as it's not a standard language feature.
138139
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
139140
// { parser: { requireEnsure: false } },
140-
141141
// First, run the linter.
142142
// It's important to do this before Typescript runs.
143143
{
@@ -167,11 +167,19 @@ module.exports = {
167167
name: 'static/media/[name].[hash:8].[ext]',
168168
},
169169
},
170-
//Compile .tsx?
170+
// Compile .tsx?
171171
{
172172
test: /\.(ts|tsx)$/,
173173
include: paths.appSrc,
174-
loader: require.resolve('ts-loader')
174+
use: [
175+
{
176+
loader: require.resolve('ts-loader'),
177+
options: {
178+
// disable type checker - we will use it in fork plugin
179+
transpileOnly: true,
180+
},
181+
},
182+
],
175183
},
176184
// The notation here is somewhat confusing.
177185
// "postcss" loader applies autoprefixer to our CSS.
@@ -341,6 +349,12 @@ module.exports = {
341349
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
342350
// You can remove this if you don't use Moment.js:
343351
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
352+
// Perform type checking and linting in a separate process to speed up compilation
353+
new ForkTsCheckerWebpackPlugin({
354+
async: false,
355+
tsconfig: paths.appTsConfig,
356+
tslint: paths.appTsLint,
357+
}),
344358
],
345359
// Some libraries import Node modules but don't use them in the browser.
346360
// Tell Webpack to provide empty mocks for them so importing them works.

‎packages/react-scripts/package.json

+31-23
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "react-scripts-ts",
3-
"version": "2.8.0",
3+
"version": "2.9.0",
44
"description": "Configuration and scripts for Create React App.",
55
"repository": "wmonk/create-react-app",
6-
"license": "BSD-3-Clause",
6+
"license": "MIT",
77
"engines": {
88
"node": ">=6"
99
},
@@ -21,41 +21,49 @@
2121
"react-scripts-ts": "./bin/react-scripts-ts.js"
2222
},
2323
"dependencies": {
24-
"autoprefixer": "7.1.2",
24+
"autoprefixer": "7.1.6",
25+
"babel-core": "6.26.0",
26+
"babel-eslint": "7.2.3",
27+
"babel-jest": "20.0.3",
28+
"babel-loader": "7.1.2",
29+
"babel-preset-react-app": "^3.1.0",
30+
"babel-runtime": "6.26.0",
2531
"case-sensitive-paths-webpack-plugin": "2.1.1",
2632
"chalk": "1.1.3",
27-
"css-loader": "0.28.4",
33+
"css-loader": "0.28.7",
2834
"dotenv": "4.0.0",
29-
"extract-text-webpack-plugin": "3.0.0",
30-
"file-loader": "0.11.2",
35+
"extract-text-webpack-plugin": "3.0.2",
36+
"file-loader": "1.1.5",
37+
"fork-ts-checker-webpack-plugin": "^0.2.8",
3138
"fs-extra": "3.0.1",
3239
"html-webpack-plugin": "2.29.0",
3340
"jest": "20.0.4",
3441
"object-assign": "4.1.1",
3542
"postcss-flexbugs-fixes": "3.2.0",
36-
"postcss-loader": "2.0.6",
43+
"postcss-loader": "2.0.8",
3744
"promise": "8.0.1",
38-
"react-dev-utils": "^4.0.1",
39-
"style-loader": "0.18.2",
40-
"ts-jest": "^20.0.7",
41-
"ts-loader": "^2.3.7",
42-
"tslint": "^5.7.0",
43-
"tslint-loader": "^3.5.3",
44-
"tslint-react": "^3.2.0",
45-
"typescript": "~2.5.3",
46-
"source-map-loader": "^0.2.1",
45+
"raf": "3.4.0",
46+
"react-dev-utils": "^4.2.1",
47+
"style-loader": "0.19.0",
4748
"sw-precache-webpack-plugin": "0.11.4",
48-
"url-loader": "0.5.9",
49-
"webpack": "3.5.1",
50-
"webpack-dev-server": "2.7.1",
51-
"webpack-manifest-plugin": "1.2.1",
52-
"whatwg-fetch": "2.0.3"
49+
"url-loader": "0.6.2",
50+
"webpack": "3.8.1",
51+
"webpack-dev-server": "2.9.4",
52+
"webpack-manifest-plugin": "1.3.2",
53+
"whatwg-fetch": "2.0.3",
54+
"ts-jest": "^21.1.4",
55+
"ts-loader": "^3.1.1",
56+
"tslint": "^5.8.0",
57+
"tslint-react": "^3.2.0",
58+
"typescript": "~2.6.1",
59+
"source-map-loader": "^0.2.3"
5360
},
5461
"devDependencies": {
55-
"react": "^15.5.4",
56-
"react-dom": "^15.5.4"
62+
"react": "^16.0.0",
63+
"react-dom": "^16.0.0"
5764
},
5865
"optionalDependencies": {
5966
"fsevents": "1.1.2"
6067
}
6168
}
69+

0 commit comments

Comments
 (0)