LaravelでTypeScriptを利用できるようにしてみました。
環境
* Laravel:5.7
* TypeScript：3.0.3
* ts-loader:3
※ laravel-mixで使用するwebpackのバージョンが古いため、ts-loaderは3にする必要がありました。
導入
プロジェクトの新規作成
|
1 2 3 |
composer create-project --prefer-dist laravel/laravel TypeScriptApp cd TypeScriptApp yarn install |
パッケージのインストール
|
1 |
yarn add -D ts-loader@^3 typescript@3.0.3 |
tsconfig.jsonの作成
プロジェクトの直下にtsconfig.jsonを作成します。
※環境設定は好みに合わせて変更してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "compilerOptions": { "outDir": "./built/", "sourceMap": true, "strict": true, "noImplicitReturns": true, "noImplicitAny": true, "module": "es2015", "experimentalDecorators": true, "emitDecoratorMetadata": true, "moduleResolution": "node", "target": "es5", "lib": [ "es2016", "dom" ] }, "include": [ "resources/ts/**/*" ] } |
TypeScriptを作成
/resources/ts/helloworld.tsを作成します。
今回はハローワールドします。
|
1 |
console.log("Hello World"); |
webpack.mix.jsを編集
Laravel MixでTypeScriptを変換できるようにしてあげます。
以下の内容を追加してください。
|
1 |
mix.ts('resources/ts/helloworld.ts', 'public/js') |
bladeファイルの編集
welcome.blade.phpに以下のコードを追加します。
|
1 |
<script src="{{ mix('js/helloworld.js') }}"></script> |
動作確認
サーバの起動
|
1 |
php artisan serve |
consoleの確認
開発者ツールを開き、コンソールを確認します。
まとめ
以上、LaravelでTypeScriptを導入する方法でした。
