From c861a0c38c0dcc41b1a9c99feb95890f1895ab15 Mon Sep 17 00:00:00 2001 From: Havret Date: Thu, 25 May 2017 14:42:19 +0200 Subject: [PATCH 1/8] Introduce awesome-typescript-loader instead of ts-loader --- packages/react-scripts/config/webpack.config.dev.js | 2 +- packages/react-scripts/config/webpack.config.prod.js | 2 +- packages/react-scripts/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 2eed1e04e..fc6c0c22c 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -185,7 +185,7 @@ module.exports = { { test: /\.(ts|tsx)$/, include: paths.appSrc, - loader: require.resolve('ts-loader'), + loader: require.resolve('awesome-typescript-loader'), }, // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 405b085fb..3bbccb5e2 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -175,7 +175,7 @@ module.exports = { { test: /\.(ts|tsx)$/, include: paths.appSrc, - loader: require.resolve('ts-loader'), + loader: require.resolve('awesome-typescript-loader'), }, // The notation here is somewhat confusing. // "postcss" loader applies autoprefixer to our CSS. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 4c62880a4..aa8773407 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -43,7 +43,7 @@ "react-dev-utils": "^1.0.2", "react-error-overlay": "^1.0.2", "style-loader": "0.17.0", - "ts-loader": "^2.0.3", + "awesome-typescript-loader": "^3.1.3", "tslint": "^5.2.0", "tslint-loader": "^3.5.3", "tslint-react": "^3.0.0", From 479b59ce83a008f28aaf2dac78c75b9a6e92c83d Mon Sep 17 00:00:00 2001 From: Havret Date: Thu, 25 May 2017 15:33:16 +0200 Subject: [PATCH 2/8] Add Babel support --- packages/react-scripts/config/webpack.config.dev.js | 3 +++ packages/react-scripts/config/webpack.config.prod.js | 3 +++ 2 files changed, 6 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index fc6c0c22c..019a55c13 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -186,6 +186,9 @@ module.exports = { test: /\.(ts|tsx)$/, include: paths.appSrc, loader: require.resolve('awesome-typescript-loader'), + query: { + useBabel: true, + }, }, // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 3bbccb5e2..38d2fa1f4 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -176,6 +176,9 @@ module.exports = { test: /\.(ts|tsx)$/, include: paths.appSrc, loader: require.resolve('awesome-typescript-loader'), + query: { + useBabel: true, + }, }, // The notation here is somewhat confusing. // "postcss" loader applies autoprefixer to our CSS. From c0dea60300a3d6e7ace4559b5cb969ba7a231000 Mon Sep 17 00:00:00 2001 From: Havret Date: Thu, 25 May 2017 15:33:16 +0200 Subject: [PATCH 3/8] Add Babel support --- packages/react-scripts/config/webpack.config.dev.js | 3 +++ packages/react-scripts/config/webpack.config.prod.js | 3 +++ packages/react-scripts/package.json | 9 +++++---- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index fc6c0c22c..019a55c13 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -186,6 +186,9 @@ module.exports = { test: /\.(ts|tsx)$/, include: paths.appSrc, loader: require.resolve('awesome-typescript-loader'), + query: { + useBabel: true, + }, }, // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 3bbccb5e2..38d2fa1f4 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -176,6 +176,9 @@ module.exports = { test: /\.(ts|tsx)$/, include: paths.appSrc, loader: require.resolve('awesome-typescript-loader'), + query: { + useBabel: true, + }, }, // The notation here is somewhat confusing. // "postcss" loader applies autoprefixer to our CSS. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index aa8773407..3e54ceb9d 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -22,8 +22,10 @@ "react-scripts-ts": "./bin/react-scripts-ts.js" }, "dependencies": { - "autoprefixer": "7.1.0", "app-root-path": "^2.0.1", + "autoprefixer": "7.1.0", + "awesome-typescript-loader": "^3.1.3", + "babel-core": "^6.24.1", "case-sensitive-paths-webpack-plugin": "2.0.0", "chalk": "1.1.3", "cli-highlight": "1.1.4", @@ -42,14 +44,13 @@ "promise": "7.1.1", "react-dev-utils": "^1.0.2", "react-error-overlay": "^1.0.2", + "source-map-loader": "^0.2.1", "style-loader": "0.17.0", - "awesome-typescript-loader": "^3.1.3", + "sw-precache-webpack-plugin": "0.9.1", "tslint": "^5.2.0", "tslint-loader": "^3.5.3", "tslint-react": "^3.0.0", "typescript": "^2.3.3", - "source-map-loader": "^0.2.1", - "sw-precache-webpack-plugin": "0.9.1", "url-loader": "0.5.8", "webpack": "2.5.1", "webpack-dev-server": "2.4.5", From aaba6f073b12e908819ebf509447280c0781f202 Mon Sep 17 00:00:00 2001 From: Havret Date: Thu, 25 May 2017 16:35:46 +0200 Subject: [PATCH 4/8] Add Babel support --- packages/react-scripts/config/paths.js | 1 + packages/react-scripts/config/webpack.config.dev.js | 2 +- packages/react-scripts/config/webpack.config.prod.js | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index cb125d207..d24068121 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -105,6 +105,7 @@ if ( appHtml: resolveOwn('template/public/index.html'), appIndexJs: resolveOwn('template/src/index.tsx'), appPackageJson: resolveOwn('package.json'), + appTemplate: resolveOwn('template'), appSrc: resolveOwn('template/src'), yarnLockFile: resolveOwn('template/yarn.lock'), testsSetup: resolveOwn('template/src/setupTests.ts'), diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index bec188d57..bfcd569d0 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -188,7 +188,7 @@ module.exports = { loader: require.resolve('awesome-typescript-loader'), query: { useBabel: true, - configFileName: path.join(paths.appSrc, 'tsconfig.json') + configFileName: path.join(paths.appTemplate, 'tsconfig.json'), }, }, // "postcss" loader applies autoprefixer to our CSS. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 1184ecea4..0f2cb2c86 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -178,7 +178,7 @@ module.exports = { loader: require.resolve('awesome-typescript-loader'), query: { useBabel: true, - configFileName: path.join(paths.appSrc, 'tsconfig.json') + configFileName: path.join(paths.appTemplate, 'tsconfig.json'), }, }, // The notation here is somewhat confusing. From f89a351f3cabc4098d2bdcb13049f399ddf139e8 Mon Sep 17 00:00:00 2001 From: Havret Date: Sat, 27 May 2017 17:23:23 +0200 Subject: [PATCH 5/8] Introduce awesome-typescript-loader instead of ts-loader --- packages/react-scripts/config/paths.js | 4 +++- packages/react-scripts/config/webpack.config.dev.js | 2 +- packages/react-scripts/config/webpack.config.prod.js | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index d24068121..b8ff94fb7 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -56,6 +56,7 @@ module.exports = { appHtml: resolveApp('public/index.html'), appIndexJs: resolveApp('src/index.tsx'), appPackageJson: resolveApp('package.json'), + appTsConfig: resolveApp('tsconfig.json'), appSrc: resolveApp('src'), yarnLockFile: resolveApp('yarn.lock'), testsSetup: resolveApp('src/setupTests.ts'), @@ -76,6 +77,7 @@ module.exports = { appHtml: resolveApp('public/index.html'), appIndexJs: resolveApp('src/index.tsx'), appPackageJson: resolveApp('package.json'), + appTsConfig: resolveApp('tsconfig.json'), appSrc: resolveApp('src'), yarnLockFile: resolveApp('yarn.lock'), testsSetup: resolveApp('src/setupTests.ts'), @@ -105,7 +107,7 @@ if ( appHtml: resolveOwn('template/public/index.html'), appIndexJs: resolveOwn('template/src/index.tsx'), appPackageJson: resolveOwn('package.json'), - appTemplate: resolveOwn('template'), + appTsConfig: resolveOwn('tsconfig.json'), appSrc: resolveOwn('template/src'), yarnLockFile: resolveOwn('template/yarn.lock'), testsSetup: resolveOwn('template/src/setupTests.ts'), diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index bfcd569d0..01f59fe95 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -188,7 +188,7 @@ module.exports = { loader: require.resolve('awesome-typescript-loader'), query: { useBabel: true, - configFileName: path.join(paths.appTemplate, 'tsconfig.json'), + configFileName: paths.appTsConfig, }, }, // "postcss" loader applies autoprefixer to our CSS. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index feb099bbb..c064eebd2 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -178,7 +178,7 @@ module.exports = { loader: require.resolve('awesome-typescript-loader'), query: { useBabel: true, - configFileName: path.join(paths.appTemplate, 'tsconfig.json'), + configFileName: paths.appTsConfig, }, }, // The notation here is somewhat confusing. From 1f8063bdbc021735d3d18b6380f15aa9fca1911b Mon Sep 17 00:00:00 2001 From: Havret Date: Sat, 27 May 2017 17:36:26 +0200 Subject: [PATCH 6/8] Introduce awesome-typescript-loader instead of ts-loader --- packages/react-scripts/config/paths.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index b8ff94fb7..2846e80fa 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -107,7 +107,7 @@ if ( appHtml: resolveOwn('template/public/index.html'), appIndexJs: resolveOwn('template/src/index.tsx'), appPackageJson: resolveOwn('package.json'), - appTsConfig: resolveOwn('tsconfig.json'), + appTsConfig: resolveOwn('template/tsconfig.json'), appSrc: resolveOwn('template/src'), yarnLockFile: resolveOwn('template/yarn.lock'), testsSetup: resolveOwn('template/src/setupTests.ts'), From de08ff8127f4f31565a1864faf01d2cd6e50d567 Mon Sep 17 00:00:00 2001 From: Havret Date: Sun, 28 May 2017 09:41:14 +0200 Subject: [PATCH 7/8] Try to remove rootDir from tsconfig --- packages/react-scripts/template/tsconfig.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-scripts/template/tsconfig.json b/packages/react-scripts/template/tsconfig.json index d4627d98a..2330c3b2c 100644 --- a/packages/react-scripts/template/tsconfig.json +++ b/packages/react-scripts/template/tsconfig.json @@ -8,7 +8,6 @@ "allowJs": true, "jsx": "react", "moduleResolution": "node", - "rootDir": "src", "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, From 7abc3a49961d70cfcdc59774551fe93aea6303ea Mon Sep 17 00:00:00 2001 From: Havret Date: Wed, 14 Jun 2017 08:50:07 +0200 Subject: [PATCH 8/8] apply @mattleff suggestions --- packages/react-scripts/template/tsconfig.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-scripts/template/tsconfig.json b/packages/react-scripts/template/tsconfig.json index 2330c3b2c..b7dcf85b8 100644 --- a/packages/react-scripts/template/tsconfig.json +++ b/packages/react-scripts/template/tsconfig.json @@ -8,6 +8,7 @@ "allowJs": true, "jsx": "react", "moduleResolution": "node", + "rootDir": "src", "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, @@ -19,6 +20,7 @@ "exclude": [ "node_modules", "build", + "config", "scripts", "acceptance-tests", "webpack",