adding typescript overlay

This commit is contained in:
Ken
2019-02-13 10:36:09 -08:00
parent 7841c962eb
commit 392ebe4a5c
6 changed files with 58 additions and 10 deletions

26
package-lock.json generated
View File

@@ -3291,6 +3291,26 @@
"integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=", "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
"dev": true "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": { "form-data": {
"version": "2.3.3", "version": "2.3.3",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz", "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
@@ -9538,9 +9558,9 @@
"dev": true "dev": true
}, },
"typescript": { "typescript": {
"version": "3.2.4", "version": "3.3.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.2.4.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.3.tgz",
"integrity": "sha512-0RNDbSdEokBeEAkgNbxJ+BLwSManFy9TeXz8uW+48j/xhEXv1ePME60olyzw2XzUqUBNAYFeJadIqAgNqIACwg==", "integrity": "sha512-Y21Xqe54TBVp+VDSNbuDYdGw0BpoR/Q6wo/+35M8PAU0vipahnyduJWirxxdxjsAkS7hue53x2zp8gz7F05u0A==",
"dev": true "dev": true
}, },
"uglify-js": { "uglify-js": {

View File

@@ -4,10 +4,10 @@
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"start:client": "webpack-dev-server --mode development --progress", "start:client": "webpack-dev-server --mode development --progress --open",
"build": "webpack --mode production", "build": "webpack --mode production",
"test": "jest --watch", "test": "jest --watch",
"start:server": "nodemon server/index.js", "start:server": "nodemon -w server server/index.js",
"start": "run-p start:server start:client" "start": "run-p start:server start:client"
}, },
"keywords": [], "keywords": [],
@@ -28,9 +28,11 @@
"cors": "^2.8.5", "cors": "^2.8.5",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"jest": "^23.6.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-jest": "^23.10.5",
"ts-loader": "^5.3.3", "ts-loader": "^5.3.3",
"typescript": "^3.2.4", "typescript": "^3.3.3",
"webpack": "^4.28.4", "webpack": "^4.28.4",
"webpack-cli": "^3.2.1", "webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14", "webpack-dev-server": "^3.1.14",

6
step2-01/index.html Normal file
View File

@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
hi
</body>
</html>

1
step2-01/src/index.tsx Normal file
View File

@@ -0,0 +1 @@
console.log('hi');

View File

@@ -8,6 +8,7 @@
"target": "es5", "target": "es5",
"jsx": "react", "jsx": "react",
"allowJs": true, "allowJs": true,
"lib": ["es2015", "dom"] "lib": ["es2015", "dom"],
"skipLibCheck": true
} }
} }

View File

@@ -1,10 +1,12 @@
const path = require('path'); const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const entries = { const entries = {
step04: './step04/src/index', step04: './step04/src/index',
step05: './step05/src/index', step05: './step05/src/index',
step06: './step06/src/index', step06: './step06/src/index',
'step2-01': './step2-01/src/index',
playground: './playground/src/index' playground: './playground/src/index'
}; };
@@ -16,7 +18,12 @@ module.exports = Object.keys(entries).map(entryPoint => {
rules: [ rules: [
{ {
test: /\.tsx?$/, test: /\.tsx?$/,
use: 'ts-loader', use: {
loader: 'ts-loader',
options: {
transpileOnly: true
}
},
exclude: /node_modules/ exclude: /node_modules/
} }
] ]
@@ -25,6 +32,10 @@ module.exports = Object.keys(entries).map(entryPoint => {
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: path.join(__dirname, `${entryPoint}/index.html`), template: path.join(__dirname, `${entryPoint}/index.html`),
filename: '../index.html' filename: '../index.html'
}),
new ForkTsCheckerWebpackPlugin({
silent: true,
async: false
}) })
], ],
resolve: { resolve: {
@@ -36,7 +47,14 @@ module.exports = Object.keys(entries).map(entryPoint => {
}, },
devServer: { devServer: {
contentBase: path.resolve(__dirname), 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'
}; };
}); });