Skip to content

Commit e9cdbd3

Browse files
committed
minor #8136 Add typescript loader documentation (davidmpaz, javiereguiluz)
This PR was submitted for the master branch but it was merged into the 3.3 branch instead (closes #8136). Discussion ---------- Add typescript loader documentation This adds Encore TypeScript loader documentation. @weaverryan sorry for taking long on this.....feel free to add other point you think is necessary. Commits ------- 0e9908c Minor change 5b74bdd Add reference to docs in frontend page d15e5ed Add typescript loader documentation
2 parents 85880c6 + 0e9908c commit e9cdbd3

File tree

2 files changed

+47
-0
lines changed

2 files changed

+47
-0
lines changed

frontend.rst

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ Adding more Features
4343
* :doc:`Enabling Vue.js (vue-loader) </frontend/encore/vuejs>`
4444
* :doc:`Configuring Babel </frontend/encore/babel>`
4545
* :doc:`Source maps </frontend/encore/sourcemaps>`
46+
* :doc:`Enabling TypeScript (ts-loader) </frontend/encore/typescript>`
4647

4748
Optimizing
4849
..........

frontend/encore/typescript.rst

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
Enabling TypeScript (ts-loader)
2+
===============================
3+
4+
Want to use `TypeScript`_? No problem! First, install the dependencies:
5+
6+
.. code-block:: terminal
7+
8+
$ yarn add --dev typescript ts-loader
9+
10+
Then, activate the ``ts-loader`` in ``webpack.config.js``:
11+
12+
.. code-block:: diff
13+
14+
// webpack.config.js
15+
// ...
16+
17+
Encore
18+
// ...
19+
.addEntry('main', './assets/main.ts')
20+
21+
.enableTypeScriptLoader()
22+
;
23+
24+
That's it! Any ``.ts`` files that you require will be processed correctly. You can
25+
also configure the `ts-loader options`_ via a callback:
26+
27+
.. code-block:: javascript
28+
29+
.enableTypeScriptLoader(function (typeScriptConfigOptions) {
30+
typeScriptConfigOptions.transpileOnly = true;
31+
typeScriptConfigOptions.configFileName = '/path/to/tsconfig.json';
32+
});
33+
34+
If React assets are enabled (``.enableReactPreset()``), any ``.tsx`` file will be
35+
processed as well by ``ts-loader``.
36+
37+
Loader usage can be checked better in its `README`_ documentation.
38+
39+
"Use webpack like normal, including ``webpack --watch`` and ``webpack-dev-server``,
40+
or through another build system using the Node.js API."
41+
42+
-- Running section of ts-loader documentation
43+
44+
.. _`TypeScript`: https://www.typescriptlang.org/
45+
.. _`ts-loader options`: https://github.com/TypeStrong/ts-loader#options
46+
.. _`README`: https://github.com/TypeStrong/ts-loader#typescript-loader-for-webpack

0 commit comments

Comments
 (0)