[Question] ES5

[d4rekanguok]

[Question] ES5

[ricokahler]

This plugin actually combines with the default "JS loader" that Gatsby uses. If you're unfamiliar, Gatsby uses webpack behind the scenes and we simply add the ts-loader in the chain before Gatsby's default JS loader.

gatsby-typescript/packages/gatsby-plugin-ts/src/gatsby-node.ts

Lines 46 to 58 in 69a7240

	test: /\.tsx?$/,
	exclude: /node_modules/,
	use: [
	jsLoader,
	{
	loader: requireResolve('ts-loader'),
	options: {
	...tsLoader,
	// use ForkTsCheckerWebpackPlugin for typecheck
	transpileOnly: true,
	},
	},
	],

So the way this works is:

1. webpack loads a resource and tries to find matching rule for the file extension (in our case, it's .ts or .tsx files)
2. webpack finds our rule for .ts/.tsx files and runs our loader chain.
3. in our loader chain, first the typescript loader is run which compiles typescript with the typescript compiler (via the ts-loader). In this step we don't actually want to compile es2015 to es5, we just want to compile typescript-only features like const enums and namespaces so that the next gatsby-provided loader can accept our input (e.g. ts => js)
4. by default, the gatsby-provided loader is the babel-loader which uses babel to compile es2015 to whatever target your specify (e.g. ES2015 => ES5)

---

TL;DR you actually want the target to remain as ES2015 for typescript because we feed that result into Gatsby's default JS loader which handles ES2015 to ES5.

If you're looking to support older browsers, there's actually a much simpler way to do so via browerslist. Using browserlist is actually more powerful than specifying a compile target because other loaders like postcss can read from it too and automatically add CSS vendor prefixes.

Check out the official Gatsby docs for more info.

[d4rekanguok]

Thanks for clarifying Rico, I'll add this to the docs.