ES Module / Webpack


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

↓tsconfig.jsonでmoduleを指定する

```tsconfig.json
"module": "es6"
```

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

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

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

https://caniuse.com/?search=module

#Serve
npmパッケージ

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

```
% npm install -g serve
```

```
% serve
```

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

```
http://localhost:5000
```

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

#importとexportの書き方
#####import

①↓名前を指定してimport

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

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

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

③↓全部取ってくるimport

```ts
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などのファイルを、
まとめて１つのファイルにします。

<a href="https://webpack.js.org/">Official Webpack</a>

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
```