Help us understand the problem. What is going on with this article?

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 * 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 を読み込んでみたメモ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした