使用 Webpack 和 ESBuild 实现快速 TypeScript

最近，我将一个一直在做的项目迁移到了 TypeScript。我决定将 Webpack 与 esbuild 加载器结合使用。原因是，与 Webpack、rollup、parcel 等其他打包工具相比，esbuild 生态系统在插件和加载器方面仍然相对较新。

本文的代码可在此处获得。

如果您像我一样是视觉学习者，我还为您制作了一个视频！

什么是 Webpack？

Webpack 的核心是一个用于现代 JavaScript 应用程序的静态模块打包器。它基本上会将所有代码、资源和依赖项打包成更易于使用和部署的静态文件。您可以点击此处了解更多信息。

什么是 esbuild？

esbuild 是一个速度极快的 JavaScript 打包器，速度最高可达 10-100 倍。您可以在这里查看基准测试并了解更多信息。

入门

假设我们有一个简单的 hello world typescript 项目



├── dist
├── index.ts
├── package.json
├── tsconfig.json
└── yarn.lock

安装 Webpack

让我们安装webpack和webpack-cli，我们将使用Webpack 5



yarn add -D webpack webpack-cli

让我们安装插件

现在我们将安装以下插件：

esbuild-loader（秘密武器！）
fork-ts-checker-webpack-plugin（帮助我们进行类型检查）
nodemon-webpack-plugin（我们也可以使用webpack-dev-server）



yarn add -D esbuild-loader fork-ts-checker-webpack-plugin nodemon-webpack-plugin

让我们创建我们的 Webpack 配置

让我们构建我们的 webpack 配置！您可以在这里阅读更多关于该配置的信息



// External modules
const path = require('path');

// Webpack plugins
const NodemonPlugin = require('nodemon-webpack-plugin');
const ForkTsCheckerPlugin = require('fork-ts-checker-webpack-plugin');

// Environment config
const isDevelopment = process.env.NODE_ENV !== 'production';
const mode = isDevelopment ? 'development' : 'production';

// Bundle config options
const BUNDLE = {
  entry: './index.ts',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist')
  }
};

module.exports = {
  mode,
  target: 'node',
  entry: BUNDLE.entry,
  stats: 'errors-only',
  module: getLoaders(),
  plugins: getPlugins(),
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.json']
  },
  output: BUNDLE.output
};

/**
 * Loaders used by the application.
 */
function getLoaders() {
  const esbuild = {
    test: /\.(js|jsx|ts|tsx)?$/,
    loader: 'esbuild-loader',
    options: {
      loader: 'tsx',
      target: 'es2015'
    },
    exclude: /node_modules/
  };

  const loaders = {
    rules: [esbuild]
  };

  return loaders;
}

/**
 * Plugins
 */
function getPlugins() {
  const nodemon = new NodemonPlugin();
  const tsChecker = new ForkTsCheckerPlugin();

  return [tsChecker, nodemon];
}

添加脚本

让scripts我们在 package.json 中添加一些内容。在开发过程中，我们将利用 Webpack 的热模块替换功能，并使用以下--hot标志：



"start": "yarn build --watch --hot",
"build": "webpack --color --progress"

让我们启动我们的应用程序！



yarn start

注意：您可以使用webpack-node-externals忽略node_modules包中的任何内容

太棒了！现在你应该可以正常运行了！如果你遇到任何问题，请随时通过Twitter联系我。

文章来源：https://dev.to/karanpratapsingh/blazing-fast-typescript-with-webpack-and-esbuild-4mhh