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

Question

I am still in the process of setting up my project configuration so I don't have any errors to work with right now, but if I am understanding the Typescript docs correctly...

It seems like Project references TypeScript Docs - Project references are not that necessary if transpiling with babel-loader in webpack. (I'm working in VSCode)

I am trying to convert an Electron app to TypeScript and currently reorganizing the folder structure so I have minimal issues. I am trying to understand if I am on the right track and if I can avoid including "references" and instead just use "extends" to get the functionality I want.

Here is my project structure ignoring all files that are not tsconfig files:

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

In this structure ./tsconfig.json would really just be for references like the example on Microsoft's Github

Electron Main Process and related files are in ./main . The tsconfig here will set "module":"commonjs" for working in node. I think it will also extend from the ./tsconfig-base.json

Electron Renderer Process and my React-Redux app files are in ./src/client . The tsconfig here sets "module":"es2015" or "module":"ESNEXT" for working with es modules. I think it will also extend from the ./tsconfig-base.json

The ./__tests__/__client__/tsconfig.json and ./__tests__/__main__/tsconfig.json would just be duplicates of the non tests folder versions similarly extending from the base config in ./

Webpack config is already set up to handle creating separate bundles for main and renderer processes so that the entire app can be in TypeScript. Is there any reason I should be using "references" in my files in the main or client folders?

Sample snippets of the Webpack config before I switch the tnry files to be.ts files (dev):

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

Main Process:

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

continued to Renderer Process:

{
    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

Project Reference will help you solve some problems in case where your test projects import src/main modules. This is what Project Reference solves:

• There's no built-in up-to-date checking, so you end up always running tsc twice
• Invoking tsc twice incurs more startup time overhead
• tsc -w can't run on multiple config files at once

read more about Project References