Laravel-mixにTypeScriptを導入する
LaravelとVueの組み合わせの環境は、
システム開発で使うことがあるのだが、
この環境構成に加えて、
「TypeScript」
についても導入を行いたいと思って、
実際に試した時のメモ。
前提：Laravel8+Vue3の環境構築
まず、前提として、
Laravel8+Vue3の環境構築を行った。
Laravelの画面表示は、
こちらのバージョン表示が、
Laravel8での導入を行った。
併せて、
Vue3についても導入を行い、
{
"dependencies": {
"vue": "^3.2.31"
}
}パッケージ管理上で、
上記のようにバージョンが３系で動くようになった。
ここまでの導入は、
以下の記事を参考にしてもらいたい。
TypeScriptの導入の参考記事
上記までの環境構築を前提として、
Laravelの環境に、
TypeScriptの導入を進めてみる。
参考にした記事をメモしておく
TypeScriptの導入設定メモ
実際に試したことをメモしていく。
TypeScriptのloaderのインストール
npm install ts-loader typescript --save-dev実行すると
$ npm install ts-loader typescript --save-dev
:
+ ts-loader@9.2.8
+ typescript@4.6.2
added 2 packages from 3 contributors and audited 781 packages in 8.385sという感じで、
TypeScriptと付随するloaderがインストールされた。
次にTypeScript用の設定ファイルを作成する
tsconfig.jsonというファイルを作成。
中身を記述する
{
"compilerOptions": {
"target": "es5",
"module": "es2020",
"moduleResolution": "node",
"baseUrl": "./",
"strict": true,
"skipLibCheck": true,
"noImplicitAny": false
},
"include": ["resources/js/**/*"]
}次に
webpackの設定ファイルを変更する
webpack.mix.js設定の中身は、
「js」を「ts」に以下のように変更する
const mix = require('laravel-mix');
mix.ts('resources/js/app.ts', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);ここまでで、
コンパイルを確認してみると
./resources/js/app.ts 2:16-27
[tsl] ERROR in /var/www/html/jimusagyo/resources/js/app.ts(2,17)
TS2307: Cannot find module '@/App.vue' or its corresponding type declarations.このようなエラーが出たので、
以下の対応を実施。
resources/js/types.d.jsまたは、以下（上記でうまくいったが、別環境でうまくいかず、以下。理由不明）
resources/js/shim-vue.d.tsdeclare module '*.vue' {
import { Component } from 'vue'
const component: Component
export default component
}こちらを行うことで、
コンパイルがうまくいった。
$ npm run watch$ npm run watch
:
:
✔ Compiled Successfully in 5668ms
┌───────────────────────────────────┬──────────┐
│ File │ Size │
├───────────────────────────────────┼──────────┤
│ /js/app.js │ 1.32 MiB │
│ css/app.css │ 1 bytes │
└───────────────────────────────────┴──────────┘
| ✔ Mix: Compiled successfully in 5.85s
| webpack compiled successfullyスキルを使って、就職/転職/副業する時のサイト
プログラミングのスキルなどを、自分なりに高めた上で、
自分のスキルをアピールして就職や転職を行い、年収をあげるか、
副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。
まずはできる範囲で取り組むことで、
少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。
