This post is a little long but the aim is to cover creating a simple TypeScript\/HTML website without using any frameworks but using a whole bunch of standard tools. <\/p>\n
The website will be pathetically unimpressive because I want to solely concentrate on just getting the various technologies working together.<\/p>\n
We’ll be using Visual Code as the editor. We’ll be using TypeScript, ESLint and Jest (as per previous posts on this topics) and we’ll be using webpack to both create a distribution of our code and to host our code.<\/p>\n
Creating the basics<\/strong><\/p>\n Adding tests<\/strong><\/p>\n I’ve covered installing Jest for testing React applications previously but let’s see the steps to take to get everything installed for our non-React world<\/p>\n In Visual Code the plugin for Jest (Use Facebok’s Jest With Pleasure) from Orta is very useful to have.<\/p>\n Test coverage<\/strong><\/p>\n Jest includes an option for running code coverage, simply change your packages.json script to<\/p>\n Adding webpack<\/strong><\/p>\n Next up we’re going to create our basic web site, extending on what we’ve already covered.<\/p>\n Time to create bundles<\/strong><\/p>\n We’re going to use webpack to create some distribution bundles<\/p>\n Minifying<\/strong><\/p>\n You’ll notice that the JavaScript file generated in the previous steps is not exactly small, containing comments, whitespace etc. So we’re going to minify it for distribution.<\/p>\n Trying an alternate minify<\/strong><\/p>\n Let’s try terser<\/p>\n The optimization will need to be run webpack in production mode, i.e. webpack –mode=production or webpack-dev-server –open –mode=production or in webpack.config.js set mode: ‘production’.<\/p>\n Hence using yarn we can run yarn bundle –mode=production<\/em> to see the bundle.js has been minified using terse. Obviously you can remove the new MinifyPlugin()<\/em> also at this point if using TerserPlugin.<\/p>\n","protected":false},"excerpt":{"rendered":" This post is a little long but the aim is to cover creating a simple TypeScript\/HTML website without using any frameworks but using a whole bunch of standard tools. The website will be pathetically unimpressive because I want to solely concentrate on just getting the various technologies working together. We’ll be using Visual Code as […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[45,46],"tags":[],"class_list":["post-7098","post","type-post","status-publish","format-standard","hentry","category-javascript","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7098","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7098"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7098\/revisions"}],"predecessor-version":[{"id":7121,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7098\/revisions\/7121"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\r\n{\r\n "compilerOptions": {\r\n "target": "es6",\r\n "outDir": ".\/public",\r\n "rootDir": ".\/src",\r\n "allowJs": true,\r\n "skipLibCheck": true,\r\n "allowSyntheticDefaultImports": true,\r\n "strict": true,\r\n "forceConsistentCasingInFileNames": true,\r\n "module": "esnext",\r\n "moduleResolution": "node",\r\n "resolveJsonModule": true,\r\n "noImplicitAny": false\r\n },\r\n "include": [\r\n "src"\r\n ],\r\n "exclude": [\r\n "node_modules"\r\n ]\r\n}\r\n<\/pre>\n<\/li>\n\r\nclass App {\r\n getSalutation() {\r\n return "Hello World"\r\n } \r\n}\r\n\r\nlet app = new App();\r\nconsole.log(app.getSalutation());\r\n<\/pre>\n<\/li>\n\n
\r\n"scripts": \r\n{\r\n "build": "tsc --watch", \r\n "start": "babel-node --presets es2015 .\/public\/index.js"\r\n}\r\n<\/pre>\n<\/li>\n\r\n{\r\n "presets": ["env"]\r\n}\r\n<\/pre>\n<\/li>\n\n
\r\nmodule.exports = {\r\n "parser": '@typescript-eslint\/parser',\r\n "plugins": ['@typescript-eslint'],\r\n "extends": ['plugin:@typescript-eslint\/recommended'],\r\n "rules": {\r\n "@typescript-eslint\/no-parameter-properties": "off",\r\n "@typescript-eslint\/no-explicit-any": "off"\r\n }\r\n};\r\n<\/pre>\n<\/li>\n\n
\r\nmodule.exports = {\r\n roots: ['.\/src'],\r\n transform: {\r\n '^.+\\\\.tsx?$': 'ts-jest',\r\n },\r\n testRegex: '(\/__tests__\/.*|(\\\\.|\/)(test|spec))\\\\.tsx?$',\r\n moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],\r\n }\r\n<\/pre>\n<\/li>\n<\/ul>\n\n
\n
\r\n<html> \r\n <body>\r\n <script src=".\/index.js"><\/script>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n<\/li>\n
\n
\r\nvar path = require("path");\r\nmodule.exports = {\r\n entry: {\r\n app: [".\/public\/index.js"]\r\n },\r\n output: {\r\n path: path.resolve(__dirname, "build"),\r\n filename: "bundle.js"\r\n },\r\n devServer: {\r\n port: 9000,\r\n contentBase: ".\/public"\r\n },\r\n module: {\r\n rules: [\r\n {\r\n test: \/\\.js$\/,\r\n exclude: \/(node_modules)\/,\r\n use: {\r\n loader: "babel-loader",\r\n options: {\r\n presets: ["babel-preset-env"]\r\n }\r\n }\r\n }\r\n ]\r\n }\r\n};\r\n<\/pre>\n<\/li>\n\r\ndocument.body.innerHTML = app.getSalutation();\r\n<\/pre>\n<\/li>\n
\n
\n
\r\nconst path = require('path');\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\r\nconst CleanWebpackPlugin = require('clean-webpack-plugin');\r\n\r\nmodule.exports = {\r\n mode: 'development',\r\n entry: {\r\n app: '.\/public\/index.js'\r\n },\r\n devtool: 'inline-source-map',\r\n devServer: {\r\n port: 9000,\r\n contentBase: '.\/dist'\r\n },\r\n plugins: [\r\n new CleanWebpackPlugin(),\r\n new HtmlWebpackPlugin({\r\n title: 'Demo'\r\n })\r\n ],\r\n output: {\r\n filename: '[name].bundle.js',\r\n path: path.resolve(__dirname, 'dist'),\r\n publicPath: '\/'\r\n }\r\n};\r\n<\/pre>\n<\/li>\n\n
\r\nconst MinifyPlugin = require("babel-minify-webpack-plugin");\r\n<\/pre>\n<\/li>\n\r\nplugins: [\r\n new CleanWebpackPlugin(),\r\n new HtmlWebpackPlugin({\r\n title: 'Demo'\r\n }),\r\n new MinifyPlugin()\r\n],\r\n<\/pre>\n<\/li>\n\n
\r\nconst TerserPlugin = require('terser-webpack-plugin');\r\n<\/pre>\n<\/li>\n\r\noptimization: {\r\n minimizer: [new TerserPlugin({\r\n extractComments: true,\r\n test: \/\\.js(\\?.*)?$\/i,\r\n })],\r\n },\r\n<\/pre>\n<\/li>\n<\/ul>\n