Hello TypeScript (01) - Environment scaffolding

Years later, Hello World!

New project

// ts_in_action
 npm init -y
 npm i typescript -g
 tsc --init
Copy the code

Project directory

---build
    |---webpack.config.js
    |---webpack.base.config.js
    |---webpack.dev.config.js
    |---webpack.pro.config.js
---src
    |---index.ts
    |---tpl
        |---index.html
---package.json
---package-lock.json
---tsconfig.json
Copy the code

hello world

// src/index.ts
let hello: string = "Hello World";
Copy the code

compile

$ tsc ./src/index.ts
Copy the code

You can also check it out on playground

The results of

// src/index.js
var hello = "Hello World";
Copy the code

Configuring the Build tool (WebPack5)

npm i webpack webpack-cli webpack-dev-server -D
Copy the code

---build
    |---webpack.config.js
    |---webpack.base.config.js
    |---webpack.dev.config.js
    |---webpack.pro.config.js
Copy the code

webpack.config.js

Installing a plug-in
```
npm i -D webpack-merge
Copy the code
```

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.config");
const devConfig = require("./webpack.dev.config");
const proConfig = require("./webpack.pro.config");

module.exports = (env, argv) = > {
  let config = argv.mode === "development" ? devConfig : proConfig;
  // Merge files
  return merge(baseConfig, config);
};
Copy the code

webpack.base.config.js

Installing a plug-in

npm i -D html-webpack-plugin ts-loader
Copy the code

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "./src/index.ts".output: {
    filename: "app.js".path: path.resolve(__dirname, ".. /dist") // Use clean-webpack-plugin with clean-webpack-plugin
    /* webpack 5.20.0+: Clean the output directory before emit. To remove clean-webpack-plugin, use 👇 clean: true, */
  },
  resolve: {
    extensions: [".js".".ts".".tsx"],},module: {
    rules: [{test: /\.tsx? $/i,
        use: [
          {
            loader: "ts-loader"],},exclude: /node_modules/,}]},plugins: [
    // A template helps us generate the homepage and embed the output file
    new HtmlWebpackPlugin({
      template: "./src/tpl/index.html",})]};Copy the code

webpack.dev.config.js

module.exports = {
  /* ** Source map: is an information file that stores location information (each position of the converted code, corresponding to the position before the transformation). ** Cheap: source map ignores file column information ** Module: locates ts source instead of translated JS source. ** eval-source-map: Package the source map into a file as a DataURI. * /
  devtool: "eval-cheap-source-map"};Copy the code

webpack.pro.config.js

⚠️ Note: If clean: true is turned on in webpack.base.config.js, there is no need to install the clean-webpack-plugin.

Installing a plug-in

npm i -D clean-webpack-plugin
Copy the code

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  plugins: [
    /* ** Background: In order to avoid caching, we need to hash after the file, and so many builds create many useless file ** effects: the clean-webpack-plugin helps us to automatically empty the dist directory */ after each successful build
    new CleanWebpackPlugin(),
  ],
};
Copy the code

.gitignore

node_modules
dist
Copy the code

Configuration commands

package.json

{..."main": "./src/index.ts"."scripts": {
    "start": "webpack serve --mode=development --config ./build/webpack.config.js"."build": "webpack --mode=production --config ./build/webpack.config.js",},... }Copy the code

Template HTML

src/tpl/index.html

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>TypeScript In Action</title>
    <link rel="icon" href=".. /.. /static/favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <div class="app"></div>
  </body>
</html>
Copy the code

Modified index. Ts

let hello: string = "hello typescript";
document.querySelectorAll(".app") [0].innerHTML = hello;
Copy the code

npm start
Copy the code

🙂 Default accesshttp://localhost:8080/Bang bang bang — you can see it

The basic TypeScript family

Hello TypeScript (01) — Environment scaffolding
Hello Typescript (02) — Enum types
Hello Typescript (03) — Object type interface
Hello Typescript (04) — function-type interfaces, mixed-type interfaces, class interfaces
Hello Typescript (05) — functions
Hello Typescript (06) — Classes
Hello Typescript (07) — The relationship between classes and interfaces
Hello Typescript (08) — Generic
Hello Typescript (09) — Type inference, type compatibility, type protection
Hello Typescript (10) — Cross type, union type, index type, map type, conditional type

Hello TypeScript (01) — Environment scaffolding