ES Module / Webpack

ES Module

ES modulesは、JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みです。

↓tsconfig.jsonでmoduleを指定する

tsconfig.json

"module": "es6"

scriptファイルにtype = "module"を付ける

<script src="dist/main.js" defer type = "module"></script>

↓type = "module"がどのブラウザで使えるかは、こちらでご確認ください。

Serve

npmパッケージ

静的サイト、シングルページアプリケーション、
または静的ファイル（デバイス上またはローカルネットワーク上に関係なく）を提供する場合、このパッケージは最適です。

% npm install -g serve

% serve

と打つと、開発用のサーバーができます。
カレントディレクトリのファイルが、全てhttp通信で提供されます。

http://localhost:5000

のようなurlがターミナルに表示されます。

importとexportの書き方

import

①↓名前を指定してimport

import { AchieveListable } from "./interfaces.js";

②↓asを使って名前を変えるimport

import { AchieveListable as Achieves } from "./interfaces.js";

③↓全部取ってくるimport

import * as interfaces from "./interfaces.js";

export class AchieveList implements interfaces.AchieveListable {
}

export

1↓名前付きexport

achieveList.ts

export class AchieveList implements AchieveListable {
}

main.ts

import { AchieveList } from "./achieveList.js";

AchieveList.getInstance();

2↓export default

achieveList.ts

export default class AchieveList implements AchieveListable {
}

main.tsのimport名がなんでもありになります。

main.ts

import YES from "./achieveList.js";

YES.getInstance();

Webpack

Webpackは何をするものかというと、bundleするものです。
bundleは圧縮して、ギュッとまとめることを言います。
例えば、main.ts/achieve.ts/achieveList.ts/score.tsなどのファイルを、
まとめて１つのファイルにします。

Official Webpack

bundlerやmodule bundlerなどと呼ばれたり、
bundleして出来上がったものをbundleと言ったりします。

Webpackを使う理由

・モダンでないブラウザでmoduleを使うため
　- Webpackがbundleしたものは全部１まとまりになっているため、一切moduleを使いません。
　- なので、moduleがわからないブラウザにも優しいです。

・http通信を一括で行うため
　- まとめて一括で行います。

・コードの最適化のため
　- Webpackでbundleしたものは空白や改行もまとめて１行になります。
　- ファイルサイズを圧縮することで、パフォーマンスを高めることができます。

・プラグインの追加
　- 色んなものをビルドして、bundleを作っているのですが、
　- そのビルドのステップとして様々な処理を追加することができます。

・様々な種類のファイルを扱うため
　- tsローダーを使うことで、Webpack自体がTypescriptを使うことができます。
　- CSSやimagesも組み込むことができます。

・HMR（Hot Module Replacement）付きのローカルサーバーを使うため
　- HMRは、何かコードを編集して、保存した瞬間にブラウザが自動でリロードされる物です。
　- Webpackは、開発用のデベロップメントサーバーを持っています。

install

% npm install --save-dev webpack webpack-cli

↑--save-dev　　「これからインストールするのは開発用のパッケージですよ」という意味
↑webpack-cli　　Webpackコマンドを使う際必要なもの

setup

①　webpack専用のconfigファイル（webpack.config.js）を作成します。
②↓node.jsのexport文を書きます。

webpack.config.js

module.exports = {}

なんでexportするかというと、webpackコマンドを打ったときに、
内部的にwebpackがmodule.exports = {　}の{　}の中身を使うからです。

③↓entryを設定します。

webpack.config.js

module.exports = {
  entry: './dist/main.js'
}

entryはwebpackのスタートファイルを設定するものです。

④↓outputを設定します。

最終的にギュッとbundleして出力されるものです。

webpack.config.js

const path = require('path');

module.exports = {
  entry: './dist/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

path:は絶対パスで書く必要があります。
＿＿dirnmeは、カレンとディレクトリの絶対パスが入ります。
requireは、node.jsで使うimport文です。
path.resolve(__dirname, 'dist')は、/Users/ユーザー名/カレンとディレクトリ/distとなります。

Source Map作成

①devtool: 'inline-source-map'を書く

webpack.config.js

const path = require('path');

module.exports = {
  entry: './dist/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'inline-source-map'
}

②コマンド

% npm run build

ts-loader

ts-loaderを用いることによって、webpackはTypescriptを理解できるようになります。

install

これまではグローバルに入れていましたが、ローカルにもTypescriptを入れる必要があります。

% npm install --save -dev ts-loader typescript

setup

↓module: には、「どういうファイルをどう扱うのか」を設定していきます。
↓rules: の中に具体的に書いていきます。

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/achievement/main.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'inline-source-map',
  module: {
    rules: [{
      test: /\.ts$/,
      use: 'ts-loader',
      exclude: /node_modules/
    }]
  },
  resolve: {
    extensions: ['.ts', '.js']
  }
}

↑test: は、.tsファイルを。
↑useは、ts-loaderで。
↑ resolve: {
　　extensions: ['.ts', '.js']
　}
で拡張子がなかった場合に、自動で付けてあげるというものです。

extensions　＝　拡張子

webpack-dev-server

webpackを使用したフロントエンド開発時に利用できる開発環境向けのwebサーバーです。

↓まず、webpack-dev-serverをインストールします。

% npm install --save-dev webpack-dev-server

↓package.jsonに、"start": "webpack serve"を追加して、npm run startコマンドを打ちます。

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve"
  }

% npm run start

するとProject is running at http://localhost:8080/
のように、localhost:8080が立ち上がります。

clean-webpack-plugin

生成先ディレクトリを綺麗に掃除してくれるプラグインです。
ハッシュ付きのファイルを作成するときに重宝します。

↓とすると、余計なファイルを削除してくれます。

% npm install --save-dev clean-webpack-plugin

webpack.config.js

  plugins: [
    new CleanWebpackPlugin()
  ]

% npm run build