jquery等を使う。

Webアプリ環境

1. npm パッケージマネージャ
2. TypeScript 型付きのjavascrpt
3. WebPack TypeScriptやHTMLのパーツ化のために使用
4. Babel (今回使わなかった。)　JSのバージョン吸収

npm

プロジェクトでパッケージ管理をスタートしたい場合

npm init

ではじめられる。 -yをつけておけば初期設定はすべてyesで飛ばせる。 これでpackage.jsonが作成される。

インストールしたいものを

npm install hoge

でインストールする。 インストールしたものはpackage.jsonに記録される。

1. 本番環境と開発環境でインストールをわけれる。（開発環境の場合は--save-dev をつける等)
2. globalにインストールしたい場合 -gをつける。

package.jsonの例

{
    "name": "jsapp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "webpack",
        "watch": "webpack -w"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@types/dom-inputevent": "^1.0.1",
        "html-loader": "^0.5.5",
        "ts-loader": "^4.3.0",
        "typescript": "^2.8.3",
        "webpack": "^4.8.3",
        "webpack-cli": "^2.1.3"
    }
}

scriptsのbuildにwebpackを設定しているので

npm run build

でwebpackを実行するとdistフォルダにコンパイルしたものが吐き出される。

1. "@types/dom-inputevent" typesciptでdomのinputeventの型定義情報
2. "html-loader" htmlをjsで読み込むのに使用
3. "ts-loader" typescriptをjavascriptにコンパイルするのに使用
4. "typescript" typescriptを使用する
5. webpack, webpack-cli ts-loader, html-loader等を使うために使用

WebPack

https://webpack.js.org/

設定はwebpack.config.js

インストール

npm install webpack webpack-cli --save-dev

実行

distフォルダ(設定で変更可能)に webpack.config.jsで設定しておいた処理を通してできたものが吐き出される。

実行はnpmのスクリプトに設定しておく

"scripts": {
  "build": "webpack"
  "watch": "webpack -w"
}

設定

webpack.config.js

module.exports = {
  // or production
  mode: 'development',

  entry: {
    main:'./src/main.ts',
    menu:'./src/menu.ts'},

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  },
  // for import
  resolve: {
    extensions: [
      '.ts'
    ]
  }
};

1. entry ビルドを開始するエントリーポイントのjs
2. output 出力
3. module test:に指定された拡張子のものは use:に指定されたローダーで変換をかけること。

参考

https://ics.media/entry/12140

html-loader

htmlをjsに読み込むために使用 設定はwebpack.config.jsの例を参照

使用例

let html = require('./hoge.html');

これでhtmlが文字列で取得できる。

TypeScript

https://ics.media/entry/16329

インストール

npmで適宜インストール typescriptの他にwebpackで使用するために ts-loaderもインストールがいる。

設定ファイル　

ルートにtsconfig.jsonをおく。

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "es2015" // 出力モジュール名
  }
}

型名

必要に応じてtypescriptの型の定義情報をnpmでインストールする。

@types 型定義ファイル

例 @types/dom-inputevent

npm install --save @types/dom-inputevent

Jquery

typescript用に型情報@types/jquery をinstall。

html側でjqueryはimportしておくこと。

使用例

$("#listBox").mouseover(function() {
    $(this).fadeOut("slow");
});

Jquery plugin

プラグインの例 jquery.hoge.js

(function ($) {
    $.fn.hoge = function () {
        return $("p").click(function () {
            console.log("test!");
            $(this).text("hello!");
        });
    };
})(jQuery);

これをjqueryとともにhtml側で読み込んでおく。

タイプスクリプトから読み込むには インターフェースを定義して、JQueryのメソッドに追加するファイルを用意しておく。

jquery.hoge.t.ds

interface Hoge {
    hoge:() => JQuery<HTMLElement>;
}

interface JQuery extends Hoge {

}

これで使える。

$("p").hoge();