javascript - 如果使用 babel 进行编译，是否需要 typescript 项目引用？ (使用 Webpack 的 Electron 项目)

Question

我仍在设置我的项目配置的过程中，所以我现在没有任何错误要处理，但如果我正确理解 Typescript 文档......

似乎项目引用 TypeScript Docs - Project references如果在 webpack 中使用 babel-loader 进行编译，则没有必要。 (我在 VSCode 工作)

我正在尝试将 Electron 应用程序转换为 TypeScript，并且目前正在重新组织文件夹结构，因此我遇到的问题很少。
我试图了解我是否走在正确的轨道上，是否可以避免包含“引用”，而只是使用“扩展”来获得我想要的功能。🤔

这是我的项目结构，忽略了所有不是 tsconfig 文件的文件:

./tsconfig.json
./tsconfig-base.json
./main/tsconfig.json
./src/client/tsconfig.json
./__tests__
./__tests__/__client__/tsconfig.json
./__tests__/__main__/tsconfig.json

在这个结构中 ./tsconfig.json真的只是为了引用像 the example on Microsoft's Github

Electron 主进程及相关文件位于 ./main .这里的tsconfig会设置 "module":"commonjs"在节点中工作。我认为它也将从 ./tsconfig-base.json 扩展。

Electron Renderer Process 和我的 React-Redux 应用程序文件位于 ./src/client .这里的tsconfig设置 "module":"es2015"或 "module":"ESNEXT"用于使用 es 模块。我认为它也将从 ./tsconfig-base.json 扩展。
./__tests__/__client__/tsconfig.json和 ./__tests__/__main__/tsconfig.json将只是非 的重复项测试 文件夹版本类似地从 ./ 中的基本配置扩展而来

Webpack 配置已经设置为处理为主进程和渲染器进程创建单独的包，以便整个应用程序可以在 TypeScript 中。有什么理由我应该在主文件夹或客户端文件夹中的文件中使用“引用”？

在我将 tnry 文件切换为 .ts 文件(dev)之前的 Webpack 配置示例片段:

const rendererInclude = path.resolve(__dirname, "src");
const mainInclude = path.resolve(__dirname, "main");

主要流程:

module.exports = [
  {
    mode: "development",
    entry: path.join(__dirname, "main", "swell.js"),
    output: {
      path: path.join(__dirname, "dist"),
      filename: "main-bundle.js",
    },
    target: "electron-main",
    node: {
      __dirname: false,
      __filename: false,
    },
    resolve: {
      extensions: [".ts", ".tsx", ".js", ".json"],
    },
    module: {
      rules: [
        {
          test: /\.(ts|js)x?$/,
          loader: "babel-loader",
          include: mainInclude,
          exclude: /node_modules/,
        }
    ] } ... },

继续渲染进程:

{
    mode: "development",
    entry: path.join(__dirname, "src", "index.js"),
    output: {
      path: path.join(__dirname, "dist"),
      filename: "renderer-bundle.js",
    },
    target: "electron-renderer",
    resolve: {
      extensions: [".ts", ".tsx", ".js", ".json"],
    },
    module: {
      rules: [
        {
          test: /\.(ts|js)x?$/,
          loader: "babel-loader",
          include: rendererInclude,
          exclude: /node_modules/,
        ]} ...} ]

Answer 1

项目引用 如果您的测试项目导入 src/main 模块，将帮助您解决一些问题。
这是项目引用解决的问题:

没有内置的最新检查，所以你最终总是运行 tsc 两次

两次调用 tsc 会导致更多的启动时间开销

tsc -w 不能同时在多个配置文件上运行

阅读更多关于 Project References