zimudec / laravel-mix-react-typescript-extension

Laravel Mix extension for building React with TypeScript. Using @babel/preset-typescript.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

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");

About

Laravel Mix extension for building React with TypeScript. Using @babel/preset-typescript.


Languages

Language:JavaScript 100.0%