TypeScript packaging

webpack integration
Usually, in actual development, we need to use the build tool to package the code;

TS can also be used in combination with the build tool. Next, take webpack as an example to introduce how to use TS in combination with the build tool;

The steps are as follows:

Initialize project
Enter the project root directory, execute the command npm init -y, and create the package.json file

Download build tool
The command is as follows:

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

A total of 7 packages are installed:

Webpack: build tool webpack webpack cli: command line tool for webpack
Webpack dev server: typescript: ts compiler for webpack development server
ts loader: ts loader, which is used to compile ts files in webpack
html webpack plugin: the html plug-in in webpack, which is used to automatically create html files
Clean webpack plugin: the clean plug-in in webpack will clear the directory before each build

Configure webpack
Create the webpack configuration file webpack.config.js in the root directory:

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

module.exports = {
   optimization:{
       minimize: false // Turn off code compression, optional
   },

   entry: "./src/index.ts",

   devtool: "inline-source-map",

   devServer: {
       contentBase: './dist'
   },

   output: {
       path: path.resolve(__dirname, "dist"),
       filename: "bundle.js",
       environment: {
           arrowFunction: false // Turn off the arrow function of webpack. Optional
       }
   },

   resolve: {
       extensions: [".ts", ".js"]
   },

   module: {
       rules: [
           {
               test: /\.ts$/,
               use: {
                   loader: "ts-loader"     
               },
               exclude: /node_modules/
           }
       ]
   },

   plugins: [
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
           title:'TS test'
       }),
   ]
}

Configure TS compilation options
Create tsconfig.json under the root directory. The configuration can be based on your needs

{
   "compilerOptions": {
       "target": "ES2015",
       "module": "ES2015",
       "strict": true
   }
}

Modify package.json configuration modify package.json add the following configuration

{
   ...
   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "build": "webpack",
       "start": "webpack serve --open chrome.exe"
   },
   ...
}

Project use
Create the ts file under src, and execute npm run build on the command line to compile the code;

Or execute npm start to start the development server;

Babel
In addition to webpack, it is often necessary to combine babel to convert code in development;

In order to make it compatible with more browsers, on the basis of the above steps, babel is introduced into the project through the following steps;

Although TS also supports code conversion at compile time, it only supports simple code conversion;

For example, Promise and other ES6 features, TS cannot be directly converted, and babel is also used for conversion;

Install dependent packages:

npm i -D @babel/core @babel/preset-env babel-loader core-js

Four packages are installed:

@babel/core: the core tool of babel

@babel / preset env: predefined environment of babel

@babel loader: the loader of babel in webpack

Core JS: core JS is used to enable older browsers to support the new ES syntax

Modify the webpack.config.js configuration file

...

module: {
    rules: [
        {
            test: /\.ts$/,
            use: [
                {
                    loader: "babel-loader",
                    options:{
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "targets":{
                                        "chrome": "58",
                                        "ie": "11"
                                    },
                                    "corejs":"3",
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",

                }
            ],
            exclude: /node_modules/
        }
    ]
}

...
In this way, the files compiled with ts will be processed by babel again;

So that the code can be used directly in most browsers;

At the same time, the browser version to be compatible can be specified in the targets of the configuration options;

Turn from https://github.com/JasonkayZK/typescript_learn/tree/3-webpack