Build a typescript learning environment

The Code Runner plugin is available in vscode to run.ts files directly. But there’s no way to see how it works in the viewer. So setting up an HTML environment is valuable for learning typescript.

The first step is to generate package.json

npm init
Copy the code

Step 2 Install typescript globally

npm install typescript tslint -g
Copy the code

The third step is ts initialization

TSC --init // Generates the tsconfig.js configuration fileCopy the code

Step 4 Install the WebPack

NPM install webpack [email protected] webpack-dev-server -dCopy the code

Webpack – CLI must install version 4.0 or later, otherwise an error will be reported

Step 5 Install the plug-in

NPM I typescript // NPM I ts-loader clean-webpack-plugin HTML -webpack-plugin cross-env -dCopy the code

Clean-webpack-plugin: cleans specified files or folders html-webpack-plugin: can specify compiled templates cross-env: scripts that run cross-platform Settings and use environment variables

Step 6 File directory

Build webpack.config.js SRC template index.html index.ts package.json // Run NPM init and then generate tsconfig.json // run TSC --init And then generatedCopy the code

Step 7 Configure webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); Module.exports = {entry: "./ SRC /index.ts", // export file output:{filename:"main.js" // generated output file}, resolve:{extensions: ['. Js', 'benchmark' and 'ts'], / / automatic parsing file, guide file can not add suffix}, the module: {rules: [{test: / \. TSX? $/, use:' ts - loader, exclude: /node_modules/ / not to process}]}, devtool: process.env.node_env === 'production'? DevServer: {contentBase: './dist', // Runtime root directory stats: 'errors-only', // Print error information compress: false, // compress host:'localhost', port: 8089}, plugins: [ new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['./dist'] // clean up the./dist folder}), new HtmlWebpackPlugin({template: '. / SRC/template/index. HTML '/ / introduce compiled. The main js]}})Copy the code

Step 8 Write the package.json script section

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
    "build": "cross-env NODE_ENV=product webpack --config ./build/webpack.config.js"
  },
Copy the code

Cross-env is used to pass cross-env NODE_ENV=development, which can be seen in the devtool in webpack.config.js