TypeScript项目基础配置

1. TypeScript安装

# 安装typescript
npm i -g typescript
# 卸载typescript
npm uninstall -g typescript
# 安装后，查看tsc版本
tsc -v

2. 创建TyepScript项目

mkdir hello_ts
cd hello_ts

# 初始化npm项目
npm init

# 安装TypeScript依赖
npm install typescript --save-dev

# 初始化tsconfig.json
tsc --init

# 配置package.json的script
"scripts": {
    "build": "tsc"
  }

# npm执行build命令，将ts文件编译为js。
npm run build

Tips: 在src当前目录下输入tsc命令，tsc会把src（这里是你的rootDir配置的文件夹)目录以及子目录下的ts文件全部编译成js文件

3. webpack打包TypeScript

• 安装webpack的依赖

npm i -D webpack webpack-cli ts-loader

• 在项目根目录下，创建webpack.config.js文件。webapck工具需要根据这个文件配置进行打包

const path = require('path')

module.exports = {
    entry:"./index.ts",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js'], // 自动解析的文件扩展名
      },
    module: {
        rules: [ {
            test: /\.ts$/,
            use :'ts-loader',
            exclude: '/node_modules'
        }
        ]
    }
}

• 配置package.json的script

  "scripts": {
    "build": "webpack"
  }

• npm执行build命令，将ts文件打包输出

npm run build