From 392ebe4a5cba2656781f647d01e91c31e04d72e3 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 13 Feb 2019 10:36:09 -0800 Subject: [PATCH] adding typescript overlay --- package-lock.json | 26 +++++++++++++++++++++++--- package.json | 8 +++++--- step2-01/index.html | 6 ++++++ step2-01/src/index.tsx | 1 + tsconfig.json | 3 ++- webpack.config.js | 24 +++++++++++++++++++++--- 6 files changed, 58 insertions(+), 10 deletions(-) create mode 100644 step2-01/index.html create mode 100644 step2-01/src/index.tsx diff --git a/package-lock.json b/package-lock.json index 33cf78b..adcdda3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3291,6 +3291,26 @@ "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=", "dev": true }, + "fork-ts-checker-async-overlay-webpack-plugin": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/fork-ts-checker-async-overlay-webpack-plugin/-/fork-ts-checker-async-overlay-webpack-plugin-0.1.0.tgz", + "integrity": "sha512-6R2JjBzL3Bo06mMugTZfDeVBzCGHtZnci7aM+kHD/6YIgb/pG8b/ptAXtp06ySA1ZtwOGVBeHo3BO6slueD7zw==", + "dev": true + }, + "fork-ts-checker-webpack-plugin": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-0.5.2.tgz", + "integrity": "sha512-a5IG+xXyKnpruI0CP/anyRLAoxWtp3lzdG6flxicANnoSzz64b12dJ7ASAVRrI2OaWwZR2JyBaMHFQqInhWhIw==", + "dev": true, + "requires": { + "babel-code-frame": "^6.22.0", + "chalk": "^2.4.1", + "chokidar": "^2.0.4", + "micromatch": "^3.1.10", + "minimatch": "^3.0.4", + "tapable": "^1.0.0" + } + }, "form-data": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz", @@ -9538,9 +9558,9 @@ "dev": true }, "typescript": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.2.4.tgz", - "integrity": "sha512-0RNDbSdEokBeEAkgNbxJ+BLwSManFy9TeXz8uW+48j/xhEXv1ePME60olyzw2XzUqUBNAYFeJadIqAgNqIACwg==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.3.tgz", + "integrity": "sha512-Y21Xqe54TBVp+VDSNbuDYdGw0BpoR/Q6wo/+35M8PAU0vipahnyduJWirxxdxjsAkS7hue53x2zp8gz7F05u0A==", "dev": true }, "uglify-js": { diff --git a/package.json b/package.json index bc0b93f..893f5ca 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,10 @@ "description": "", "main": "index.js", "scripts": { - "start:client": "webpack-dev-server --mode development --progress", + "start:client": "webpack-dev-server --mode development --progress --open", "build": "webpack --mode production", "test": "jest --watch", - "start:server": "nodemon server/index.js", + "start:server": "nodemon -w server server/index.js", "start": "run-p start:server start:client" }, "keywords": [], @@ -28,9 +28,11 @@ "cors": "^2.8.5", "html-webpack-plugin": "^3.2.0", "jest": "^23.6.0", + "fork-ts-checker-webpack-plugin": "^0.5.2", + "fork-ts-checker-async-overlay-webpack-plugin": "^0.1.0", "ts-jest": "^23.10.5", "ts-loader": "^5.3.3", - "typescript": "^3.2.4", + "typescript": "^3.3.3", "webpack": "^4.28.4", "webpack-cli": "^3.2.1", "webpack-dev-server": "^3.1.14", diff --git a/step2-01/index.html b/step2-01/index.html new file mode 100644 index 0000000..eb4211b --- /dev/null +++ b/step2-01/index.html @@ -0,0 +1,6 @@ + + + + hi + + diff --git a/step2-01/src/index.tsx b/step2-01/src/index.tsx new file mode 100644 index 0000000..ec10f3e --- /dev/null +++ b/step2-01/src/index.tsx @@ -0,0 +1 @@ +console.log('hi'); diff --git a/tsconfig.json b/tsconfig.json index a0963f8..202579f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,6 +8,7 @@ "target": "es5", "jsx": "react", "allowJs": true, - "lib": ["es2015", "dom"] + "lib": ["es2015", "dom"], + "skipLibCheck": true } } diff --git a/webpack.config.js b/webpack.config.js index a27dc12..4de3ab1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,10 +1,12 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); const entries = { step04: './step04/src/index', step05: './step05/src/index', step06: './step06/src/index', + 'step2-01': './step2-01/src/index', playground: './playground/src/index' }; @@ -16,7 +18,12 @@ module.exports = Object.keys(entries).map(entryPoint => { rules: [ { test: /\.tsx?$/, - use: 'ts-loader', + use: { + loader: 'ts-loader', + options: { + transpileOnly: true + } + }, exclude: /node_modules/ } ] @@ -25,6 +32,10 @@ module.exports = Object.keys(entries).map(entryPoint => { new HtmlWebpackPlugin({ template: path.join(__dirname, `${entryPoint}/index.html`), filename: '../index.html' + }), + new ForkTsCheckerWebpackPlugin({ + silent: true, + async: false }) ], resolve: { @@ -36,7 +47,14 @@ module.exports = Object.keys(entries).map(entryPoint => { }, devServer: { contentBase: path.resolve(__dirname), - watchContentBase: true - } + watchContentBase: true, + hot: false, + stats: 'errors-only', + overlay: true, + inline: true + }, + stats: 'minimal', + mode: 'development', + devtool: 'cheap-module-source-map' }; });