使用 Webpack 编译 TypeScript 文件

这是 使用 Webpack 编译 TypeScript 的官方指南 。 本教程提供了一个精简版，解释如何使用 Webpack 进行编译 .ts 文件。

Webpack 配置

Webpack 中的所有内容都从 Webpack 配置 。关键部分 webpack.config.js 对于编译器是 module.rules 选项。 在这里你告诉 Webpack 在打包之前使用一个特殊的加载器来编译一个文件。 对于 TypeScript， ts-loader npm 除了 typescript npm module 。

npm install typescript ts-loader

module.rules option 是一组规则。 下面 webpack.config.js 告诉 Webpack 使用 ts-loader 模块来编译任何以 .ts 结尾的文件。

module.exports = {
  entry: ./index.ts,
  module: {
    // Use `ts-loader` on any file that ends in .ts
    rules: [
      {
        test: /\\.ts$/,
        use: ts-loader,
        exclude: /node_modules/,
      },
    ],
  },
  // Bundle .ts files as well as .js files.
  resolve: {
    extensions: [.ts, .js],
  },
  output: {
    filename: main.js,
    path: `${process.cwd()}/dist`,
  }
};

编译 TypeScript 文件

下面是 index.ts文件：

const str: string = Hello, World;

console.log(str);

您还需要添加一个 tsconfig.json file ，否则 TypeScript 会出错。 出于本教程的目的，以下 tsconfig.json 足够的：

{files:[./index.ts]}

运行 node ./dist/main.js 你应该会看到 Node 打印出 Hello, World。

$ node ./dist/main.js 
Hello, World
$