Migrate ts-loader to awesome-typescript-loader

package.json

@@ -17,6 +17,7 @@
     "@types/node": "^7.0.21",
     "@types/react": "^15.0.24",
     "@types/react-dom": "^15.5.0",
+    "babel-core": "^6.24.1",
     "eslint": "3.19.0",
     "husky": "^0.13.2",
     "lerna": "2.0.0-beta.38",

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,6 +107,7 @@ if (
     appHtml: resolveOwn('template/public/index.html'),
     appIndexJs: resolveOwn('template/src/index.tsx'),
     appPackageJson: resolveOwn('package.json'),
+    appTsConfig: resolveOwn('template/tsconfig.json'),
     appSrc: resolveOwn('template/src'),
     yarnLockFile: resolveOwn('template/yarn.lock'),
     testsSetup: resolveOwn('template/src/setupTests.ts'),

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

@@ -185,7 +185,11 @@ module.exports = {
       {
         test: /\.(ts|tsx)$/,
         include: paths.appSrc,
-        loader: require.resolve('ts-loader'),
+        loader: require.resolve('awesome-typescript-loader'),
+        query: {
+          useBabel: true,
+          configFileName: paths.appTsConfig,
+        },
       },
       // "postcss" loader applies autoprefixer to our CSS.
       // "css" loader resolves paths in CSS and adds assets as dependencies.

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

@@ -175,7 +175,11 @@ module.exports = {
       {
         test: /\.(ts|tsx)$/,
         include: paths.appSrc,
-        loader: require.resolve('ts-loader'),
+        loader: require.resolve('awesome-typescript-loader'),
+        query: {
+          useBabel: true,
+          configFileName: paths.appTsConfig,
+        },
       },
       // The notation here is somewhat confusing.
       // "postcss" loader applies autoprefixer to our CSS.

packages/react-scripts/package.json

@@ -22,8 +22,9 @@
     "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",
     "case-sensitive-paths-webpack-plugin": "2.0.0",
     "chalk": "1.1.3",
     "cli-highlight": "1.1.4",
@@ -38,16 +39,15 @@
     "postcss-flexbugs-fixes": "3.0.0",
     "postcss-loader": "2.0.5",
     "promise": "7.1.1",
+    "source-map-loader": "^0.2.1",
     "react-dev-utils": "^2.0.1",
     "react-error-overlay": "^1.0.6",
     "style-loader": "0.17.0",
-    "ts-loader": "^2.0.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.6.0",
     "webpack-dev-server": "2.4.5",

packages/react-scripts/template/tsconfig.json

@@ -8,7 +8,7 @@
     "allowJs": true,
     "jsx": "react",
     "moduleResolution": "node",
-    "rootDir": "src",
+	"rootDir": "src",
     "forceConsistentCasingInFileNames": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
@@ -20,6 +20,7 @@
   "exclude": [
     "node_modules",
     "build",
+	"config",
     "scripts",
     "acceptance-tests",
     "webpack",