TS（TypeScript）— 搭建开发环境

1.创建pakeage.json

npm init  //自选参数
npm init -y //默认参数

 2.构造目录

• 安装ts开发依赖

npm install typescript tslint -g

• 创建功能文件夹

•  初始化ts（安装typescript就可以使用tsc命令）生成tsconfig.json文件

 tsc --init

•  配置webpack

npm install webpack webpack-cli webpack-dev-server -D

 npm install clean-webpack-plugin html-webpack-plugin -D

 npm cross-env -D    

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

module.exports = {
  entry: "./src/index.ts",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist') // 添加输出目录路径
  },
  resolve: {
    extensions: [".ts", ".tsx",".js"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',
  devServer: {
    static: { // 替换 contentBase
      directory: path.join(__dirname, 'dist'), // 指定提供静态文件的目录
    },
    client: {
      logging: 'error' // 仅显示错误信息
    },
    compress: false,
    host: 'localhost',
    port: 8089
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [
        './dist'
      ]
    }),
    new HtmlWebpackPlugin({
      template: './src/template/index.html'
    })
  ]
};

• 配置打包环境

npm install cross-env -D

{
  "name": "tslearning",
  "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=production webpack --config ./build/webpack.config.js"
  },
  "keywords": [
    "typescript"
  ],