Skip to content

Commit

Permalink
change TS config to target ES6 modules
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
ChristopherChudzicki committed Jan 18, 2023
1 parent dea4cae commit 8380058
Showing 1 changed file with 5 additions and 2 deletions.
7 changes: 5 additions & 2 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand Down Expand Up @@ -70,6 +70,9 @@
],
"ts-node": {
"files": true,
"swc": true
"swc": true,
"compilerOptions": {
"module": "commonjs"
},
}
}

0 comments on commit 8380058

Please sign in to comment.