https://github.com/raicem/laravel-mix-react-typescript-extension
Laravel Mix extension for building React with TypeScript. Using @babel/preset-typescript.
https://github.com/raicem/laravel-mix-react-typescript-extension
laravel-mix react typescript
Last synced: 5 months ago
JSON representation
Laravel Mix extension for building React with TypeScript. Using @babel/preset-typescript.
- Host: GitHub
- URL: https://github.com/raicem/laravel-mix-react-typescript-extension
- Owner: raicem
- Created: 2019-03-05T19:20:59.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-07-29T20:13:46.000Z (almost 6 years ago)
- Last Synced: 2025-10-03T08:17:12.208Z (9 months ago)
- Topics: laravel-mix, react, typescript
- Language: JavaScript
- Homepage:
- Size: 4.88 KB
- Stars: 32
- Watchers: 2
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Laravel Mix React and TypeScript Extension
Laravel Mix already supports React and TypeScript. But combining those two are rather undocumented. I have made my custom extension to easily start React/TypeScript applications.
Please note that this extension compiles everything using the `babel-loader` and not the `ts-loader`. This is possible due to `@babel/preset-typescript`. Please read the following blog post if you want to know more about this: https://iamturns.com/typescript-babel/
By using `babel-loader`, webpack configuration becomes much simpler and compilation performance is higher. However during compilation `babel-loader` will simply remove everything TypeScript without checking anyting.
To see TypeScript errors you should manually check using the `tsc` command. `tsc` command becomes available because this extension installs `typescript` using npm. You should also have your `tsconfig.json` file in the project root. You can use the `example.tsconfig.json` file provided in this repository.
## Installation
`npm install laravel-mix-react-typescript-extension`
## Usage
```js
let mix = require("laravel-mix");
require("laravel-mix-react-typescript-extension");
mix
.reactTypeScript("resources/js/app.ts", "public/js")
.sass("resources/sass/app.scss", "public/css");
```