随笔 - 156  文章 - 0  评论 - 3  阅读 - 10万

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"
  ],

复制代码

 

posted on   萬事順意  阅读(434)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示