すきま風

勉強したことのメモとか

フロントエンド開発勉強日誌 4

フロントエンドプログラミング雑記 TypeScript Spring Boot

フロントエンド開発勉強日誌の続きです。

Polyfillを設定する

IE11とかの古いブラウザに対応するためにPolyfillを設定します。

core-jsとwhatwg-fetchを入れる
Polyfillの設定をする
- webpack.config.jsのentryにPolyfill用TypeScriptを設定
- polyfill.tsを用意
polyfill.bundle.jsをHeadに設定

$ npm i core-js whatwg-fetch

// webpack.config.js
// 前略
module.exports = (env, argv) => {
  return {
    mode: argv.mode || 'development',
    entry: {
      polyfill: './src/core/polyfill.ts',
      sample: './src/sample/entry/entry.ts'
    },
// 後略

// src/core/polyfill.ts
import 'core-js/features/symbol';
import 'core-js/features/promise';
import 'core-js/features/map';
import 'core-js/features/weak-map';
import 'core-js/features/object/assign';
import 'core-js/features/url-search-params';
import 'whatwg-fetch';

Buildしてできたpolyfill.bundle.jsをHEADに追加します。

<head>
  <title>top page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src="/static/polyfill.bundle.js" crossorigin="anonymous" defer=""></script>
  <script src="/static/sample.bundle.js" crossorigin="anonymous" defer=""></script>
</head>

IE11とか持っていないのでテストできないですが、これで大丈夫ですよね、多分 😑

https://github.com/zloirock/core-js
https://github.com/github/fetch