入门项目：webpack vs ts-node？

Webpack和ts-node都是用于构建和运行TypeScript项目的工具，但它们的用途和功能略有不同。

1. Webpack是一个模块打包工具，用于将多个模块（包括TypeScript文件）打包成一个或多个最终的JavaScript文件。它可以处理各种类型的静态资源，并提供了丰富的插件和加载器，用于处理各种构建需求。

下面是一个使用Webpack构建TypeScript项目的示例：

首先，确保已经安装Node.js和NPM。

1. 创建一个新的项目文件夹，并在终端中导航到该文件夹。
2. 执行以下命令来初始化项目并安装Webpack和TypeScript依赖项：

npm init -y
npm install webpack webpack-cli typescript ts-loader --save-dev

3. 在项目文件夹中创建一个名为src的文件夹，并在其中创建一个名为index.ts的TypeScript文件。在index.ts中编写一些TypeScript代码，例如：

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

greet("Webpack");

4. 在项目文件夹中创建一个名为webpack.config.js的文件，并添加以下内容：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

5. 在终端中执行以下命令来使用Webpack构建项目：

npx webpack --config webpack.config.js

这将会在项目文件夹中创建一个名为dist的文件夹，并生成一个名为bundle.js的JavaScript文件。你可以通过在HTML文件中引入这个文件来运行你的应用程序。

2. ts-node是一个运行TypeScript代码的工具，它直接在Node.js环境中解析和执行TypeScript文件，而无需事先编译为JavaScript。它非常适合于开发环境，可以更快地进行代码调试和热更新。

下面是一个使用ts-node运行TypeScript项目的示例：

首先，确保已经安装Node.js和NPM。

1. 创建一个新的项目文件夹，并在终端中导航到该文件夹。
2. 执行以下命令来初始化项目并安装ts-node和TypeScript依赖项：

npm init -y
npm install ts-node typescript --save-dev

3. 在项目文件夹中创建一个名为src的文件夹，并在其中创建一个名为index.ts的TypeScript文件。在index.ts中编写一些TypeScript代码，例如：

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

greet("ts-node");

4. 在终端中执行以下命令来使用ts-node运行项目：

npx ts-node src/index.ts

这将直接在终端中运行TypeScript文件，输出Hello, ts-node!。

无论是使用Webpack还是ts-node，你都可以根据你的项目需求选择适合的工具。Webpack适用于构建复杂的项目，并提供更多的配置选项和插件支持。而ts-node则适合于快速调试和热更新TypeScript代码。