Laravel6.0 + Typescript の設定をして、CDNから jquery と firebase とaxiosを読み込んだメモ

概要

前回からの続き。
LaravelでTypescriptを使ってみた。
さらに、CDNから読み込むライブラリを使えるように設定した。

typescript の導入

typescript の利用を参考にしたらすんなり。

インストール

npm install --save-dev ts-loader typescript

設定

{
  "compilerOptions": {
    "outDir": "./built/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "module": "es2015",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "target": "es6",
    "lib": ["es2016", "dom"]
  },
  "include": ["resources/ts/**/*"]
}

• experimentalDecorators: decolater を使用可能になる。
  • 参考

• mix に ts 使用を追加

webpack.mix.js

+ mix.ts("resources/ts/welcome/index.ts", "public/js/welcome");

使用

ts/ts/welcome/index.ts

{
    const helloWorld: string = "Hello World";

    console.log(helloWorld);
}

resources/view/welcome.blade.php

@section('scripts')

+ <script src="{{ mix('js/welcome/index.js') }}"></script>

@endsection

npm run watch-poll

ここまでのソース

CDNからライブラリを読みこむ設定

外部モジュールの読み込み

以下を追記。cdn から読み込むソースはmixしないようにする。

webpack.mix.js

mix.webpackConfig({
  externals: {
    jquery: "jQuery",
    firebase: "firebase",
    firebaseui: "firebaseui",
    axios: "axios"
  }
});

使用。import * asかimportかの読み込みかたの違いはライブラリの export の形式による。

import * as firebase from "firebase";
import axios from "axios";

ここまでのソース

[bootstrapも外部化](https://github.com/hibohiboo/whitemap/tree/adf1857ef43e312152f28ae0f20e7357a5ff1c32
/laravel_docker/whitemap)

参考

Laravel6.0 で Vue.js と Bootstrap を使う方法
laravel frontend
laravel/ui
laradock と nuxt で開発環境構築
Laravel5.5 インストールから Bootstrap4 を導入するまで
Laravel Mix
typescript の利用
typescript で import しなくても jquery が使えるようになっていたので、他の外部ライブラリとして chart.js を読み込んでみたメモ