LoginSignup
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-10-15

概要

前回からの続き。
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 * asimportかの読み込みかたの違いはライブラリの export の形式による。

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

ここまでのソース

bootstrapも外部化

参考

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2