TypeScript运行环境搭建一基于ts-node库

全局安装Typescript

npm install typescript -g

查看版本：

tsc --version

ts转js编译命令

tsc tsProjectName.ts

以上基本的操作完成之后创建Typescript的运行环境 可以分为两种 ts-node库和webpack配置一个ts环境

安装ts-node包

npm install ts-node -g
还需要安装另外两个依赖
npm install tslib @types/node -g

安装完之后就可以在终端中进行运行 ts-node tsProjectName.ts

TypeScript运行环境搭建二基于webpack

创建package.json配置文件

npm init

在本地环境下安装webpack 和 webpackCli

npm install webpack webpack-cli -D
并且手动创建webpack.config.js配置文件

在package.json文件中配置运行webpack的命令

{
  "name": "ts-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack" // 运行webpack命令为build
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.82.1",
    "webpack-cli": "^5.1.1"
  }
}

当执行打包命令的时候 就会自动执行webpack.config.js文件，所以我们需要配置打包文件的入口文件路径及其出口文件名称及文件路径 安装其对应的loader

安装loader

npm install ts-loader typescript -D

生成tsconfig.json文件 ts相关配置文件

tsc --init

配置webpack.config.js文件

const path = require("path")
module.exports = {
  mode: 'none', //不使用任何默认优化选项
  entry: "./src/main.ts", // 入口
  output: {
    path: path.resolve(__dirname, "./dist"),// 打包文件夹名称
    filename: "bundle.js" // 打包出来的文件名称
  },
  // 自动加后缀名
  resolve: {
    extensions: [".ts", ".js", ".cjs", ".json"]
  },
  // 配置loader的匹配规则
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  }
}

通过以上方式配置的ts运行环境 需要一个html文件来引入ts后就可以直接运行了 但每次更新ts文件的逻辑后 需要重新打包 这是一个比较繁琐的事情，那我们就需要搭建一个本地的服务然后创建一个默认的模板进行执行

安装本地服务

npm install webpack-dev-server -D

在package.json中配置运行指令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack serve" // 运行指令
  },

安装HtmlWebpackPlugin

npm install html-webpack-plugin -D

安装HtmlWebpackPlugin起到什么作用

HtmlWebpackPlugin是webpack 的插件，用到该插件的两个主要作用：

1. 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
2. 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
3. 也就是说，插件的基本作用就是生成html文件，不用手动生成。

在webpack.config.js中配置html文件入口

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
      plugins: [
        new HtmlWebpackPlugin({
          template: './index.html'
        })
      ]
  }

配置完成之后就可以直接使用 npm run serve 命令运行本地服务,当逻辑或者页面有改动时保存即可自动编译 然后运行本地服务进行预览