install TypeScript and related somethings.

sizer · Dec 2, 2018 · b028e63 · b028e63
1 parent 2e1b45b
commit b028e63
Show file tree

Hide file tree

Showing 6 changed files with 1,606 additions and 316 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,5 @@
 node_modules/
 .idea
 .tern-project
+dist
+ts
diff --git a/index.html b/index.html
@@ -6,6 +6,5 @@
 </head>
 <body>
 <div id="app"></div>
-<script src="app.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -4,12 +4,16 @@
   "description": "Mobx example",
   "main": "./src/index.js",
   "scripts": {
-    "dev": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --inline --history-api-fallback",
-    "start": "npm run dev"
+    "dev": "webpack-dev-server",
+    "start": "npm run dev",
+    "ts:clean": "rm -rf ./dist",
+    "ts:build": "yarn run ts:clean && tsc -p tsconfig.json"
   },
   "author": "Karel Moravec",
   "license": "ISC",
   "devDependencies": {
+    "@types/react": "^16.7.11",
+    "@types/react-dom": "^16.0.11",
     "babel-core": "^6.18.0",
     "babel-loader": "^6.2.7",
     "babel-plugin-flow-react-proptypes": "^0.16.0",
@@ -22,12 +26,15 @@
     "flow-bin": "^0.33.0",
     "flow-status-webpack-plugin": "^0.1.7",
     "glob": "^7.1.3",
+    "html-webpack-plugin": "^3.2.0",
     "mobx-react-devtools": "^4.2.9",
     "nodemon": "^1.11.0",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
+    "ts-loader": "^5.3.1",
     "typescript": "^3.2.1",
-    "webpack": "^1.13.3",
+    "webpack": "4",
+    "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^1.16.2"
   },
   "dependencies": {

diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "sourceMap": true,
+    "target": "es5",
+    "module": "es2015",
+    "jsx": "react",
+    "lib": ["es5", "es6", "es7", "es2018", "dom"],
+  },
+  "include": [
+    "./ts/**/*.ts",
+    "./ts/**/*.tsx"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,42 +1,27 @@
-const FlowStatusWebpackPlugin = require('flow-status-webpack-plugin');
+const webpack = require("webpack");
+const htmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
-  context: __dirname + '/src',
-  entry: {
-    javascript: './index.js',
-    html: '../index.html',
-  },
-
-  devServer: {
-    stats: 'errors-only',
-  },
-
+  mode: "development",
+  entry: "./ts/index.tsx",
   output: {
     filename: 'app.js',
-    path: __dirname + '/dist',
+    path: `${__dirname}/dist`,
   },
-
   resolve: {
-    extensions: ['', '.js', '.jsx', '.json']
+    extensions: ['.ts', '.tsx', '.js']
   },
-
-  plugins: [
-    new FlowStatusWebpackPlugin({
-      failOnError: true
-    })
-  ],
-
   module: {
-    loaders: [
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        loaders: ['babel-loader']
-      },
+    rules: [
       {
-        test: /\.html$/,
-        loader: 'file?name=[name].[ext]'
+        test: /\.tsx?$/,
+        use: 'ts-loader'
       }
-    ]
-  }
+    ],
+  },
+  plugins: [
+    new htmlWebpackPlugin({
+      template: "index.html",
+    })
+  ]
 };