From 462479eb7deae5e809ef5377c9b97a9c42df8389 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 7e4228c80..93488af54 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,7 @@ "dom" ], "jsx": "react", - "module": "commonjs", + "module": "ES6", "moduleResolution": "node", "typeRoots": [ "node_modules/@types", @@ -41,6 +41,9 @@ ], "ts-node": { "files": true, - "swc": true + "swc": true, + "compilerOptions": { + "module": "commonjs" + }, } }