typescriptで import しなくても jqueryが使えるようになっていたので、他の外部ライブラリとしてchart.jsを読み込んでみたメモ

typescriptで import しなくても jqueryが使えるようになっていたので、他の外部ライブラリとしてchart.jsを読み込んでみたメモ:

jQueryを使おうと思ったら、今は import しなくてもよいらしい。

chart.jsやfirebaseも同じように行けるかなと思ったけれども、そうはいかなかったのでメモ。

vueの型定義が読み込めず、typescriptのビルドが通らなかったので型定義に書いたが、

どうすればよかったのだろう。 node_modules/vue/types/vue.d.tsは確かにあったのだが、、

tscでトランスパイルしてから、webpackでバンドルする想定。

環境

• virtualbox 5.2.22
• vagrant 2.2.2
• Ubuntu 18.04.1 LTS (GNU/Linux 4.15.0-29-generic x86_64)
• Docker version 18.09.0, build 4d60db4
• docker-compose version 1.23.2, build 1110ad01

docker/webpack/Dockerfile

FROM node:11.5.0 
WORKDIR /app 
RUN npm init -y 
RUN yarn add --dev @babel/core \ 
                  @babel/cli \ 
                  @babel/preset-env 
RUN yarn add @babel/polyfill 
RUN yarn add --dev typescript 
RUN yarn add --dev tslint tslint-config-airbnb 
RUN yarn add --dev webpack 
RUN yarn add --dev webpack-cli 
RUN yarn add --dev webpack-dev-server 
RUN yarn add --dev @types/jquery 
RUN yarn add --dev @types/materialize-css 
RUN yarn add --dev @types/chart.js 

webpack.config.js

module.exports = { 
  mode: MODE, 
  module: { 
    rules: [ 
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: { loader: 'babel-loader' }, 
      }, 
    ], 
  }, 
  // cdnから読み込むものはここに 
  externals: { 
    jquery: 'jQuery', 
    firebase: 'firebase', 
    firebaseui: 'firebaseui', 
    vue: 'Vue', 
    'chart.js': 'Chart', 
  }, 
}; 
 

ソース

src/index.html

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/5.4.1/firebase.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> 
    <script type="text/javascript" src="bundle.js"></script> 
  </body> 
</html> 

上記のような感じで読み込んでいるとする。

読み込みイメージ

src/index.ts

import { Chart } from 'chart.js'; 
import * as firebase from 'firebase'; 
// Vueとvueで名前が異なっており、tslintでfixされてしまうので、disable-lineを指定。 
import Vue from 'vue'; // tslint:disable-line  
 
 $('.sidenav').sidenav(); 
 
 // document.querySelector('.my-chart')! ... (non-null-assertion-operator)を付与するとtypescriptのnullチェックによるコンパイルエラーを回避できる 
const canvas = document.querySelector('.my-chart')! as HTMLCanvasElement; 
const ctx = canvas.getContext('2d')!; 
 
const data = {/*省略*/}; 
const options = {/*省略*/}; 
const myRadarChart = new Chart(ctx, {type: 'radar',options,data,}); 
 
if (!firebase.apps.length) { 
  const config = require('./_config'); // tslint:disable-line no-var-requires 
  firebase.initializeApp(config); 
} 
 
const app = new Vue({ 
  el: '#editform', 
  data: {/* 省略 */ }, 
}); 
 

jquery

上記で分かるように、突然 $()のように使用しても、問題はなかった。

型定義があれば、拡張も反映されており、ビルドが通る。

chart.jsなども型定義を読み込んでいるが、こちらはimportしてやらないとビルドが通らない。

型定義ファイル

• 以下のように定義してやれば、外部から読み込むファイルもtypescriptでビルドを通すことができる。

src/type.d.ts

// コンパイルを通すため、外部から読み込むjsライブラリの宣言を行う。 
declare module 'firebase'; 
declare module 'firebaseui'; 
declare module 'vue'; 
 
// JQueryのインタフェースの拡張を行う。 
// yarn add --dev @types/materialize-cssで型定義ファイルを入手していれば不要だが、参考までに。 
interface JQuery { 
  sidenav(): JQuery; 
} 

参考用：使用例

参考

TypeScript の型定義ファイルと仲良くなろう
TypeScript で型定義ファイル( d.ts )がないときの対処法
Stack Over Flow : typescript document.getElementByIDで HTMLElement | null の型のせいでエラー
typescriptでjqueryを拡張
tslint ルール一覧

おまけ

検証環境のpackage.json。elmなども入っているが、typescriptのバージョンなど確認用としてそのまま出力。

package.json

{ 
  "name": "app", 
  "version": "1.0.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { 
    "watch": "chokidar '/app/**/*.pug' -p -c 'npm run build-pug' ", 
    "build-pug": "pug /app/src -o /app/dist ", 
    "pug": "pug -o /app/dist -P ", 
    "elm-watch": "yarn run chokidar '/app/**/*.elm' -p -c 'yarn run build-elm' ", 
    "build-elm": "yarn run elm make /app/src/assets/elm/ElmTest.elm --output=/app/dist/elm/ElmTest.js", 
    "test": "echo \"Error: no test specified\" && exit 1" 
  }, 
  "keywords": [], 
  "author": "", 
  "license": "ISC", 
  "devDependencies": { 
    "@babel/cli": "^7.2.3", 
    "@babel/core": "^7.2.2", 
    "@babel/preset-env": "^7.2.3", 
    "@types/chart.js": "^2.7.42", 
    "@types/jquery": "^3.3.29", 
    "@types/materialize-css": "^1.0.6", 
    "autoprefixer": "^9.4.3", 
    "babel-loader": "^8.0.4", 
    "chokidar": "^2.0.4", 
    "chokidar-cli": "^1.2.1", 
    "clean-webpack-plugin": "^1.0.0", 
    "copy-webpack-plugin": "^4.6.0", 
    "cpx": "^1.5.0", 
    "css-loader": "^2.1.0", 
    "cssnano": "^4.1.8", 
    "elm": "^0.19.0-bugfix2", 
    "elm-format": "^0.8.1", 
    "esdoc": "^1.1.0", 
    "esdoc-standard-plugin": "^1.0.0", 
    "eslint": "^5.11.0", 
    "eslint-config-airbnb-base": "^13.1.0", 
    "eslint-plugin-import": "^2.14.0", 
    "eslint-plugin-jasmine": "^2.10.1", 
    "file-loader": "^3.0.1", 
    "globule": "^1.2.1", 
    "html-loader": "^0.5.5", 
    "html-minifier-webpack-plugin": "^2.0.0", 
    "html-webpack-plugin": "^3.2.0", 
    "mini-css-extract-plugin": "^0.5.0", 
    "node-sass": "^4.11.0", 
    "postcss": "^7.0.7", 
    "postcss-cli": "^6.1.0", 
    "pug": "^2.0.3", 
    "pug-cli": "https://github.com/pugjs/pug-cli.git", 
    "style-loader": "^0.23.1", 
    "stylelint": "^9.9.0", 
    "stylelint-config-sass-guidelines": "^5.3.0", 
    "stylelint-order": "^2.0.0", 
    "stylelint-scss": "^3.4.4", 
    "tslint": "^5.12.0", 
    "tslint-config-airbnb": "^5.11.1", 
    "typedoc": "^0.13.0", 
    "typescript": "^3.2.2", 
    "uglify-js": "^3.4.9", 
    "webpack": "^4.28.2", 
    "webpack-cli": "^3.1.2", 
    "webpack-dev-server": "^3.1.14", 
    "webpack-merge": "^4.1.5" 
  }, 
  "dependencies": { 
    "@babel/polyfill": "^7.2.5" 
  } 
}