このページを改善する

Internet Explorerをサポートする パーマリンク to "Internet Explorerをサポートする"

このTipは@wmarques と@anthony-o により提出されました。

JHipsterは、エバーグリーンブラウザのみをサポートします。 ただし、Internet Explorerなどの一部の古いブラウザは簡単にサポートできます。

そのためには、次のことを行う必要があります。

  1. tsconfigでターゲットをes5に設定します。
  2. 次に、2つの選択があります。
  3. ‘core-js’から正しいポリフィルを追加します。使用すべきポリフィルがわからない場合は、Angular CLIプロジェクトとそのポリフィルを確認してください。
  4. または、babel + Babel preset-envを使用して、browserslistファイルに基づいて正しいcore-jsポリフィルを自動的にインポートします。

Babelを使用したヒント集 パーマリンク to "Babelを使用したヒント集"

まず、package.jsonの依存関係に@babel/core、@babel/preset-env、babel-loaderを追加します。npmの例です。

npm install @babel/core @babel/preset-env babel-loader --save-dev

（JHipster v6.3.1で生成されたアプリケーションでIE11が動作するように、次のバージョンでテストしました

    "@babel/core": "7.6.4",
    "@babel/preset-env": "7.6.3",
    "babel-loader": "8.0.6",

）

次に、src/main/webapp/app/polyfills.tsの先頭に次の行を追加します。

import 'core-js/stable';
import 'regenerator-runtime/runtime';

In webpack/webpack.common.js, after

            {
                test: /manifest.webapp$/,
                loader: 'file-loader',
                options: {
                    name: 'manifest.webapp'
                }
            },

次の行を追加します。

            {
                test: /\.js/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    "presets": [
                      [
                        "@babel/preset-env",
                        {
                          "targets": {
                            "firefox": "60",
                            "ie": "11"
                          },
                          "useBuiltIns": "entry",
                          "corejs": 3
                        }
                      ]
                    ]
                  }
                },
                exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,
              },

最後に、tsconfig.jsonとtsconfig-aot.jsonでtargetをes5に変更します。

詳細については、このGitHub issueとこのStackOverflowの回答を参照してください。