使用 Typescript 的 Webpack：两个配置中的通用设置，那么哪个优先？

Posted 2023-03-13

【中文标题】使用 Typescript 的 Webpack：两个配置中的通用设置，那么哪个优先？

【英文标题】：Webpack using Typescript: Common settings in both configs, so which take precedence?

【发布时间】：2019-12-26 23:35:04

【问题描述】：

我正处于将 javascript（使用 webpack）项目转换为 typescript 项目的初始阶段，我遇到的许多困惑之一是它们似乎是一些可以出现在 webpack 和 typescript 中的配置设置，所以这需要优先级？

（我目前正在开发一个节点 cli 应用程序）。

例如，主要示例是编译中包含哪些文件。

在 webpack 配置中，你可以通过规则指定选择哪些输入文件：

  module: 
    rules: [
      
        test: /index.ts/,
        use: 'shebang-loader'
      ,
      
        test: /\.ts(x?)$/,
        use: 'ts-loader'
      ,
      
        test: /\.json$/,
        use: 'json-loader'
      
    ]
  ,

正如你从上面看到的，我使用不同的加载器来处理不同的文件类型。

那么我的初始tsconfig.json如下：

  "compilerOptions": 
    "target": "es5",
    "module": "commonjs",
    "noImplicitAny": true,
    "lib": [
      "es5", "es2015", "es6", "dom"
    ]
  ,
  "include": [
    "lib/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]

那么 webpack 和 typescript 交互的真正本质是什么？我无法从 typescript 或 webpack 文档中辨别出这一点。两者似乎都能够指定编译中包含的输入文件。

另一个（可能是更好的例子）是输出文件。在 webpack 配置中，我有以下内容：

  output: 
    libraryTarget: 'commonjs',
    path: path.join(__dirname, 'dist'),
    filename: 'application-bundle.js'
  

定义“application-bundle.js”的是“dist”文件夹中的输出文件。

在 tsconfig 中，您可以有如下内容：

"outFile": "./dist/application-bundle.js",

（我目前没有定义 outFile 属性，但我知道您可以这样做，但如果能够这样做，就会产生歧义并因此产生混淆）。那么在这种情况下，webpack 是否会覆盖 typescript，反之亦然？推荐的策略是什么？

可能有更多的 typescript/webpack 交叉会引起混淆，但到目前为止我描述的 2 个是我需要了解的最前沿和最紧迫的问题，谢谢。

编辑：考虑到这一点，我还需要进一步澄清。我猜当您构建 TS/WP 项目时，TS 编译器首先运行会创建所有 .js 文件（假设在 .dist 文件夹中）。然后 webpack 打包所有生成的 .js 文件。因此，假设这是正确的，那么我是否需要将 webpack 配置为使用 dist 文件夹中的 .js 文件而不是项目源中的 .js 文件作为其输入（即 ./lib 下的所有内容，这是我的源 js 文件是）？

我希望以增量方式转换我的项目，所以我刚才所说的并不真正适合我的需要。 Webpack 需要从 ./dist 中提取一些 .js 文件，以及从 ./lib 中提取一些尚未转换为 typescript 的文件。我不知道如何修改项目以进行增量升级。

【问题讨论】：

没问题！ （我目前正在查看您的答案）

【参考方案1】：

[...] 似乎有一些配置设置可以出现在 webpack 和 typescript 中，那么哪个优先？

当 Webpack 与 TypeScript 结合时，配置中存在一些自然冗余是正确的。让我们来回答你的第一个问题：

编译中包含哪些文件？ [...] 另一个例子是输出文件。 [...] 那么在这种情况下，webpack 是否会覆盖 typescript，反之亦然？推荐的策略是什么？

简单地说，TypeScript 和 Webpack 都处理/转换输入文件并在目标目录结构或文件包中发出输出 - 都需要一些输入/输出配置信息。 TypeScript 编译器可以独立运行，也可以作为文件处理器集成为更大的 Webpack 构建的一部分。使用outFile 选项，TypeScript 甚至可以单独被视为一个迷你捆绑程序，因为它将所有.ts 文件捆绑到一个目标文件中。

要回答这个问题，如果 TypeScript 或 Webpack 配置优先，重要的是要了解 Webpack 的工作原理。我将在这里引用您的一个假设：

我猜当您构建 TS/WP 项目时，TS 编译器首先运行会创建所有 .js 文件（假设在 .dist 文件夹中）。然后 webpack 打包所有生成的 .js 文件。

这并不完全正确。但是你说得很好，因为它更清楚地说明了你的核心理解问题。 Webpack 中的所有内容都以您在配置中指定的 entry point 开头 - 如果您愿意，那就是输入。从这个入口模块，webpack 会考虑所有其他可传递导入的模块（例如通过import 或require）并创建一个依赖树。

依赖树中的每个文件都可以通过Loaders 进行转换，也可以像文件处理管道一样链接。所以ts-loader 和底层的 TypeScript 编译器使用 test: /\.ts(x?)$/ 谓词对 .ts/.tsx 文件应用转换。

总而言之，Webpack 会考虑您的入口文件，这会导致大量导入的 .ts/.tsx 文件（在您的其他文件类型中，我们在这里忽略它们）。对于每个单独的文件，TypeScript 加载器将在加载器处理管道的过程中被调用。因此，TypeScript I/O 配置将被忽略，Webpack 的entry/output 配置在构建中优先。所有其他 TypeScript 相关设置均取自 tsconfig.json，如 ts-loader docs 中所述："The tsconfig.json file controls TypeScript-related options so that your IDE, the tsc command, and this loader all share the same options."

我希望以增量方式转换我的项目

从JavaScript to TypeScript逐步迁移完全没问题！

希望，这会有所帮助。

【讨论】：

您好 ford04，感谢您的回答，这真的很有帮助。我的观点是，而不是转换现有项目。我将开始一个新的打字稿项目并逐步转移功能。它是管理我目前看到的令人困惑的打字稿错误（特别是模块/命名空间/导入/导出）的唯一方法。干杯

如果这是一个小项目并且对您来说负担得起，那就去吧！如果您想在一个项目中尝试一下，我认为值得查看 js 迁移的最后一个链接，尤其是在 tsconfig.json 中设置 `"allowJs": true`。您还可以查看compiler options 中的所有--strict 设置或设置"strict: false" 以便能够编译项目并逐步执行更严格的设置。

非常感谢。开始一个新项目对我来说仍然有意义，因为我是 typescript 的新手（并且知道 C# 和 OO 在尝试解决 typescript/javascript 问题时没有任何优势，就像我想的那样）。如果我开始一个新项目，那么我可以一次处理 1 个错误，而不是一次尝试解决大量问题。