如果使用 babel 进行编译，是否需要 typescript 项目引用？（使用 Webpack 的电子项目）答案

【问题标题】：Are typescript project references necessary if transpiling with babel? (Electron project with Webpack)如果使用 babel 进行编译，是否需要 typescript 项目引用？（使用 Webpack 的电子项目）
【发布时间】：2020-09-13 19:06:32
【问题描述】：

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

如果在 webpack 中使用 babel-loader 进行转译，项目引用 TypeScript Docs - Project references 似乎没有必要。（我在 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 这样的引用

电子主进程和相关文件在./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 只是非 tests 文件夹版本的副本，类似地从 ./ 中的基本配置扩展而来

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

在我将 tnry 文件切换为 .ts 文件（开发）之前，Webpack 配置的示例 sn-ps：

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/,
        ]} ...} ]

【问题讨论】：

标签： javascript typescript webpack electron babeljs

【解决方案1】：

项目参考将帮助您解决测试项目导入 src/main 模块时的一些问题。这是项目参考解决的问题：

没有内置的最新检查，因此您最终总是运行 tsc 两次
两次调用 tsc 会导致更多的启动时间开销
tsc -w 不能同时在多个配置文件上运行

阅读更多关于Project References

【讨论】：