Fix hot loader for typescript

developerworks · developerworks · commit c441495c7db1 · 2017-06-06T19:47:23.000+08:00
diff --git a/declarations.d.ts b/declarations.d.ts
diff --git a/package.json b/package.json
@@ -4,11 +4,13 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "watch": "nodemon --watch webpack.config.js --exec \"webpack-dev-server\"",
+    "watch": "webpack-dev-server",
     "watch_dll": "nodemon --watch webpack.config.dll.js --exec \"webpack --progress --config webpack.config.dll.js --watch\"",
     "build_dll": "rm -rf dist && webpack --config webpack.config.dll.js --progress"
   },
   "dependencies": {
+    "@types/react-router-dom": "^4.0.4",
+    "antd": "^2.10.4",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-router-dom": "^4.1.1"
@@ -19,6 +21,9 @@
     "@types/webpack-env": "^1.13.0",
     "add-asset-html-webpack-plugin": "^2.0.1",
     "awesome-typescript-loader": "^3.1.3",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-polyfill": "^6.23.0",
     "file-loader": "^0.11.1",
     "html-webpack-plugin": "^2.28.0",
     "react-hot-loader": "next",
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,25 +1,22 @@
 import * as React    from 'react'
-import * as ReactDOM from 'react-dom'
 
-
-export interface HelloProps {
+interface HelloProps {
   compiler: string;
   framework: string;
 }
 
 
-class App extends React.Component<HelloProps, any> {
+export default class App extends React.Component<HelloProps, any> {
   constructor(props: HelloProps){
     super(props);
   }
   render() {
     return (
       <div>
-      <h2>Hello {this.props.compiler} and {this.props.framework}!</h2>
+      <h2>Hello <span style={{color: "blue"}}>{this.props.compiler}</span> and {this.props.framework}!!</h2>
       <p>You can edit the <code>./src/App.tsx</code> to feel react hot load with typescript.</p>
       </div>
     )
   }
 }
 
-export default App
diff --git a/src/index.html b/src/index.html
@@ -5,6 +5,6 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
     <body>
-    <div id="example"></div>
+    <div id="app"></div>
   </body>
 </html>
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,26 +1,28 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import { AppContainer } from "react-hot-loader";
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import { AppContainer } from "react-hot-loader"
+import { BrowserRouter, Route, Link } from "react-router-dom"
+import { message, notification, Icon } from 'antd'
+
 import App from "./App";
 
-const rootElement = document.getElementById("example");
+const rootEl = document.getElementById("app");
 
 ReactDOM.render(
   <AppContainer>
-    <App compiler="TypeScript" framework="React"/>
+    <App compiler="TypeScript" framework="React" />
   </AppContainer>,
-  document.getElementById('example')
-);
+  rootEl
+)
 
 if (module.hot) {
-
   module.hot.accept("./App", () => {
-    const NextApp = require<RequireImport>("./App").default;
+    const NextApp = require<RequireImport>("./App").default
     ReactDOM.render(
       <AppContainer>
-      <NextApp compiler="TypeScript" framework="React"/>
+        <NextApp compiler="TypeScript" framework="React" />
       </AppContainer>,
-      document.getElementById('example')
+      rootEl
     )
   })
 }
@@ -31,16 +33,16 @@ if (module.hot) {
 //       <Component compiler="TypeScript" framework="React" />,
 //     </AppContainer>,
 //     document.getElementById("example")
-//   );
+//   )
 // }
 
-// type AppComponent = new(...args: any[]) => React.Component<HelloProps, any>;
+// type AppComponent = new(...args: any[]) => React.Component<HelloProps, any>
 
 // const render = (component: AppComponent) => {
 //   const AppInit = React.createElement(component, {
 //     compiler: "TypeScript",
 //     framework: "React"
-//   });
+//   })
 //   ReactDOM.render(
 //     <AppContainer>
 //       <AppInit />
@@ -49,9 +51,9 @@ if (module.hot) {
 //   )
 // }
 
-// render(App);
+// render(App)
 // if (module.hot) {
-//   module.hot.accept('./App', () => { render(App) });
+//   module.hot.accept("./App", () => { render(App) })
 // }
 
 
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,18 +1,21 @@
 {
   "compilerOptions": {
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
     "outDir": "./dist/",
     "sourceMap": true,
     "noImplicitAny": true,
     "module": "commonjs",
     "target": "es5",
-    "jsx": "react"
+    "jsx": "react",
+    "skipLibCheck": true
   },
   "files": [
-    "./src/declarations.d.ts",
+    "./declarations.d.ts",
     "./node_modules/@types/webpack-env/index.d.ts",
     "./src/index.tsx"
   ],
   "exclude": [
     "node_modules"
   ]
-}
+}
diff --git a/webpack.config.dll.js b/webpack.config.dll.js
@@ -24,6 +24,8 @@ module.exports = {
         test: /\.tsx?$/,
         exclude: /node_modules/,
         use: [{
+          loader: 'react-hot-loader/webpack'
+        }, {
           loader: 'awesome-typescript-loader'
         }]
      },
diff --git a/webpack.config.js b/webpack.config.js
@@ -7,8 +7,12 @@ const open_write_file       = false;
 
 const config = {
   entry: {
+    vendors: [
+      'react-hot-loader/patch'
+    ],
     app: [
       'react-hot-loader/patch',
+      'webpack/hot/only-dev-server',
       './src/index.tsx'
     ]
   },
@@ -21,7 +25,7 @@ const config = {
   },
   devtool: 'cheap-module-source-map',
   resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
+    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json']
   },
   module: {
     rules: [
@@ -31,7 +35,7 @@ const config = {
         include: path.resolve(__dirname, "src"),
         use: [{
           loader: 'react-hot-loader/webpack'
-        },{
+        }, {
           loader: 'awesome-typescript-loader'
         }]
       },
@@ -65,7 +69,7 @@ const config = {
       manifest: require('./dist/vendor-manifest.dll.json')
     }),
     new AddAssetHtmlPlugin([
-      {filepath: require.resolve('./dist/vendor.55026a8bdf762f1533ba.dll.js')},
+      {filepath: require.resolve('./dist/vendor.c455ba929e1f42ea8c79.dll.js')},
     ]),
   ],
   devServer: {
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,25 +1,22 @@`
`1`	`1`	`import * as React from 'react'`
`2`		`-import * as ReactDOM from 'react-dom'`
`3`	`2`
`4`		`-`
`5`		`-export interface HelloProps {`
	`3`	`+interface HelloProps {`
`6`	`4`	`compiler: string;`
`7`	`5`	`framework: string;`
`8`	`6`	`}`
`9`	`7`
`10`	`8`
`11`		`-class App extends React.Component<HelloProps, any> {`
	`9`	`+export default class App extends React.Component<HelloProps, any> {`
`12`	`10`	`constructor(props: HelloProps){`
`13`	`11`	`super(props);`
`14`	`12`	`}`
`15`	`13`	`render() {`
`16`	`14`	`return (`
`17`	`15`	`<div>`
`18`		`- <h2>Hello {this.props.compiler} and {this.props.framework}!</h2>`
	`16`	`+ <h2>Hello <span style={{color: "blue"}}>{this.props.compiler}</span> and {this.props.framework}!!</h2>`
`19`	`17`	`<p>You can edit the <code>./src/App.tsx</code> to feel react hot load with typescript.</p>`
`20`	`18`	`</div>`
`21`	`19`	`)`
`22`	`20`	`}`
`23`	`21`	`}`
`24`	`22`
`25`		`-export default App`