How to run tsx files on a browser directly without piling?
I thought it was impossible before. However recently I found a meta web site which has the tsx and scss files in the dev tool source.
And I think it's really running the code since it's in the run stack.
I have no idea how to do that.
How to run tsx files on a browser directly without piling?
I thought it was impossible before. However recently I found a meta web site https://segment-anything./demo which has the tsx and scss files in the dev tool source.
And I think it's really running the code since it's in the run stack.
I have no idea how to do that.
Share Improve this question edited Feb 25 at 10:14 VLAZ 29.1k9 gold badges63 silver badges84 bronze badges asked May 19, 2023 at 3:56 Hao-Jung HsiehHao-Jung Hsieh 8531 gold badge7 silver badges16 bronze badges 2- Looks like something done by webpack. Basically, it changed some file contents into JS before the browser runs it. And if you click on "App.scss" of se-demo, you can even see JS statements. – qrsngky Commented May 19, 2023 at 4:36
-
1
If you open
view-source:https://segment-anything./, there is no tsx anywhere. What you can find instead is a script withsrc="/js/bundle.e4890985c971a17b3a8a.min.js", produced using webpack. It can also produce source maps, so when you debug a .min.js file, you can see the original script even though you run the transformed version. – qrsngky Commented May 19, 2023 at 4:40
2 Answers
Reset to default 3TSX is just JSX with typing. Typings are ignored by default.
The easiest way to "run tsx files on a browser directly" is by including <script src="https://unpkg./babel-standalone@6/babel.min.js"></script>.
This technically does pile, but it's done by the browser.
<script src="https://unpkg./react@18/umd/react.development.js"></script>
<script src="https://unpkg./babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// "HTMLElement" is the typing of TSX
const elem: HTMLElement = <div>Hello, World!</div>;
console.log(elem);
</script>
For a valid HTML5 page, make sure to add:
<!DOCTYPE html>
<meta charset="utf-8" />
<title>Title</title>
I hope you're doing well, Basically, Typescript is the superset of JavaScript, and browsers are not able to understand Typescript directly. If you want to run typescript code in the browser you want to pile it first.
There are many ways to pile TypeScript. The most mon way is to use the TypeScript piler, which is included in the TypeScript distribution. To pile a TypeScript file.
You can use ts-node package to execute TypeScript files from the mand line.
Still, if you want to learn about Typescript with a mand line kindly follow this link. https://www.educative.io/answers/how-to-execute-the-typescript-file-using-the-mand-line
Thanks