From 83800588d48851856283d65cf22a000d7ca719b7 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Wed, 18 Jan 2023 16:02:30 -0500 Subject: [PATCH] change TS config to target ES6 modules tldr: Changing `module` config changes the syntax used to import/export in the compiled code. The new value, "ES6", means that the code compiled by TS will include import/export statements. That code is then further compiled by Webpack, which removes the imports/exports during concatenation. Using ES6 import/exports in the typescript output improves Webpack's tree-shaking. (Or really...enables it. I believe webpack does not treeshake unless the input uses ES6 import/export syntax.) Related: TS has several sort of settings related to the syntax used in output: - `lib`: determines the default/builtin type definitions that are included when typechecking your code. - `target`: Spcecies environment in which your code is going to run, and controls how Typescript downlevels your code. > "The `target` setting changes which JS features are downleveled and which are left intact. For example, an arrow function `() => this` will be turned into an equivalent function expression if target is ES5 or lower." `target` determines the default value of `lib`. If `target` is ES5, you probably want `lib` to be ES5, too, unless you're doing further transpilation with another tool (like babel). - `module`: Determines the syntax used for exports. - `moduleResolution` determines how module identifiers ("some/thing" in like `import x from "some/thing"`) are interpretted. --- tsconfig.json | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 1284bbc94..701aa5020 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,7 @@ "dom" ], "jsx": "react", - "module": "commonjs", /* Specify what module code is generated. */ + "module": "ES6", /* Specify what module code is generated. */ // "rootDir": "./", /* Specify the root folder within your source files. */ "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ @@ -70,6 +70,9 @@ ], "ts-node": { "files": true, - "swc": true + "swc": true, + "compilerOptions": { + "module": "commonjs" + }, } }