Currently, I am in the process of setting up my project configuration and have not encountered any errors so far. However, based on my understanding of the Typescript documentation...
It appears that Project references are not essential when using babel-loader to transpile in webpack while working with TypeScript (specifically in VSCode).
I am in the midst of transitioning an Electron application to TypeScript and reorganizing the folder structure to minimize potential issues. I am exploring whether omitting "references" and utilizing "extends" would suffice to achieve the desired functionality.🤔
Here is the simplified version of my project structure focusing only on the 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 layout, ./tsconfig.json mainly serves as a reference similar to the example on Microsoft's Github.
The Electron Main Process and its associated files reside in ./main. The tsconfig file here sets "module":"commonjs" for compatibility with node. It also extends from ./tsconfig-base.json.
The Electron Renderer Process along with React-Redux app files are located in ./src/client. The tsconfig file here specifies "module":"es2015" or "module":"ESNEXT" for working with ES modules. This config also extends from ./tsconfig-base.json.
The test configurations -
./__tests__/__client__/tsconfig.json./__tests__/__main__/tsconfig.json./.
The Webpack setup is already configured to handle bundling main and renderer processes separately, enabling the entire application to utilize TypeScript. Given this setup, is there a compelling reason to incorporate "references" in the main or client folders?
Below are excerpts of the Webpack configuration before converting the tnry files to .ts extension (for development):
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/,
]} ...} ]