feat. Better typescript with babel 7. implements #884

README.md

@@ -112,7 +112,7 @@ There are 2 different ways to do it.
     {
       loader: 'babel-loader',
       options: {
-        babelrc: true,
+        babelrc: false,
         plugins: ['react-hot-loader/babel'],
       },
     },
@@ -131,7 +131,23 @@ In this case you have to modify your `tsconfig.json`, and compile to ES6 mode, a
 }
 ```
 
-##### Add babel BEFORE typescript (preferred)
+As long you cannot ship ES6 to production, you can create a `tsconfig.dev.json`, "extend" the base tsconfig and use "dev" config in dev webpack build
+. Details
+for [ts-loader](https://github.com/TypeStrong/ts-loader#configfile-string-defaulttsconfigjson)
+, for [awesome-typescript-loader](https://github.com/s-panferov/awesome-typescript-loader#configfilename-string-defaulttsconfigjson).
+
+```json
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "target": "es6"
+  }
+}
+```
+
+##### Add babel BEFORE typescript
+
+> Note: this way requires babel 7 and [babel-loader@^8.0.0](https://github.com/babel/babel-loader#install)
 
 ```js
 {

examples/typescript/.babelrc

@@ -1,4 +1,8 @@
 {
-  "presets": ["env", "react"],
-  "plugins": ["react-hot-loader/babel", "transform-class-properties"]
-}
+  "plugins": [
+    "@babel/plugin-syntax-typescript",
+    "@babel/plugin-syntax-decorators",
+    "@babel/plugin-syntax-jsx",
+    "react-hot-loader/babel"
+  ]
+}

examples/typescript/package.json

@@ -6,22 +6,23 @@
     "start": "webpack-dev-server --hot"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0-beta.46",
+    "@babel/plugin-syntax-decorators": "^7.0.0-beta.46",
+    "@babel/plugin-syntax-jsx": "^7.0.0-beta.46",
+    "@babel/plugin-syntax-typescript": "^7.0.0-beta.46",
     "awesome-typescript-loader": "^3.4.1",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
+    "babel-loader": "^8.0.0-beta.2",
     "html-webpack-plugin": "^2.30.1",
     "typescript": "^2.6.2",
     "webpack": "^3.10.0",
     "webpack-dev-server": "^2.9.7"
   },
   "dependencies": {
+    "@babel/preset-env": "^7.0.0-beta.46",
     "@types/react": "^16.0.31",
     "@types/react-dom": "^16.0.3",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-hot-loader": "^4.0.0-beta.22"
+    "react-hot-loader": "^4.1.2"
   }
 }

examples/typescript/webpack.config.babel.js

@@ -9,16 +9,23 @@ module.exports = {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',
   },
+  devtool: false,
   module: {
     rules: [
       {
         test: /\.tsx?$/,
-        use: ['babel-loader', 'awesome-typescript-loader'],
+        use: ['awesome-typescript-loader', 'babel-loader'],
       },
     ],
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    alias: {
+      react: path.resolve(path.join(__dirname, './node_modules/react')),
+      'babel-core': path.resolve(
+        path.join(__dirname, './node_modules/@babel/core'),
+      ),
+    },
   },
   plugins: [new HtmlWebpackPlugin(), new webpack.NamedModulesPlugin()],
 }