前端基础教程：在toss项目中用Webpack打包TypeScript代码-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00658/article/details/148992516

前端基础教程：在toss项目中用Webpack打包TypeScript代码

frontend-fundamentals Guidelines for easily modifiable frontend code 项目地址: https://gitcode.com/gh_mirrors/fr/frontend-fundamentals

前言

在现代前端开发中，TypeScript因其强大的类型系统和更好的开发体验而广受欢迎。然而浏览器只能执行JavaScript代码，这就需要我们将TypeScript转换为浏览器能理解的JavaScript。本文将详细介绍如何在toss前端基础项目中配置Webpack来打包TypeScript代码。

TypeScript项目初始化

基础项目结构

首先，我们需要建立一个基本的TypeScript项目结构。假设我们有一个简单的数学运算模块：

project-root/
├── src/
│   ├── index.ts          # 项目入口文件
│   └── utils/
│       ├── add.ts        # 加法功能
│       ├── subtract.ts   # 减法功能
│       └── index.ts      # 工具模块入口
├── webpack.config.js     # Webpack配置文件
├── tsconfig.json         # TypeScript配置
└── package.json          # 项目依赖配置

代码示例

让我们看看这些TypeScript文件的具体内容：

// src/utils/add.ts
export function add(a: number, b: number): number {
  return a + b;
}

// src/utils/subtract.ts
export function subtract(a: number, b: number): number {
  return a - b;
}

// src/utils/index.ts
export { add } from './add';
export { subtract } from './subtract';

// src/index.ts
import { add } from './utils';

console.log(add(1, 2));  // 输出: 3

安装TypeScript

要使用TypeScript，首先需要安装它作为开发依赖：

npm install typescript --save-dev

配置TypeScript编译器

创建tsconfig.json文件来配置TypeScript编译选项：

{
  "compilerOptions": {
    "target": "ES6",                // 编译目标ES版本
    "module": "ESNext",             // 模块系统
    "moduleResolution": "bundler",  // 模块解析策略
    "allowImportingTsExtensions": true,  // 允许导入.ts扩展名
    "noEmit": true,                 // 不输出编译结果(由Webpack处理)
    "strict": true                  // 启用所有严格类型检查
  },
  "include": ["src/**/*"],          // 包含的文件
  "exclude": ["node_modules", "dist"] // 排除的文件
}

Webpack配置TypeScript支持

安装必要依赖

Webpack本身不能直接处理TypeScript文件，我们需要Babel来转换代码：

npm install babel-loader @babel/core @babel/preset-typescript --save-dev

Babel工作原理

Babel是一个JavaScript编译器，它可以将TypeScript等现代JavaScript语法转换为浏览器兼容的代码。例如：

// 输入(TypeScript)
const greet: (name: string) => string = (name) => `Hello, ${name}`;

// 输出(JavaScript)
const greet = (name) => `Hello, ${name}`;

Webpack配置

修改webpack.config.js以支持TypeScript：

const path = require('path');

module.exports = {
  entry: './src/index.ts',  // 入口文件改为.ts
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.ts$/,  // 匹配.ts文件
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-typescript'  // 使用TypeScript预设
              ]
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']  // 自动解析这些扩展名
  }
};