Zenn
Open4

IE11対応のTypescript環境

こばちきこばちき

with IE(JavaScriptのIE11対応)の「TypeSctiptをIE11対応する」を参照する
TypeScript + React 17 + Webpack 5 をIE11に対応させるはReactを使用しているが使用していなくても参考になる。
tsconfig.jsonの全オプションを理解する（随時追加中）

IE11を対象とする場合は、tsconfig.jsonのcompilerOptions.moduleは、"amd"を選択する。
amdはAsynchronous Module Definition (AMD)と呼ばれる規格でクライアントサイドコードで一般的に利用されるため。

こばちきこばちき

webpack-dev-serverを実行する場合は、webpack4以降はwebpack serverとうつようになった。

こばちきこばちき
import 'core-js/stable';
import $ from 'jquery';
import { Route } from './route';
import { ScreenFactory } from './screen.factory';

class Main {
  init() {
    const route = new Route();
    $('#screen-id').children('li').each(function() {
      const screenId = $(this).text();
      if (typeof screenId === 'string') {
        const factory = ScreenFactory.getInstance();
        const screen = factory.generate(screenId);
        screen.init();
      } else {
        console.error('screen-id is not string type.');
      }
    });
  }
}

(() => {
  const main = new Main();
  main.init();
})();

ローカルに定義したroute.tsファイルを読み込んだら以下のようなエラーが発生した。

ERROR in ./node_modules/core-js/stable/index.js
Module not found: Error: Can't resolve './route' in '/workspaces/create_online_native/src/main/node/node_modules/core-js/stable'
resolve './route' in '/workspaces/create_online_native/src/main/node/node_modules/core-js/stable'
  using description file: /workspaces/create_online_native/src/main/node/node_modules/core-js/package.json (relative path: ./stable)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /workspaces/create_online_native/src/main/node/node_modules/core-js/package.json (relative path: ./stable/route)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /workspaces/create_online_native/src/main/node/node_modules/core-js/stable/route doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /workspaces/create_online_native/src/main/node/node_modules/core-js/stable/route.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /workspaces/create_online_native/src/main/node/node_modules/core-js/stable/route.js doesn't exist
      as directory
        /workspaces/create_online_native/src/main/node/node_modules/core-js/stable/route doesn't exist
 @ ./src/main.ts

const path = require('path');

module.exports = {
  mode: 'development',
  target: ['web', 'es5'],
  entry: [
    './src/main.ts'
  ],
  output: {
    path: path.resolve(__dirname, '../webapp/common/js/modern'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)$/,
        use: {
          loader: 'ts-loader'
        }
      }
    ]
  },
  // CDNから読むものはここに記述する
  externals: {
    jquery: 'jQuery'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  devServer: {
    host: '0.0.0.0',
    port: 3000,
    contentBase: path.join(__dirname, '../webapp'),
    publicPath: '/common/js/modern/',
    watchContentBase: true,
    watchOptions: {
      poll: true
    }
  }
}

webpack.config.jsのmodule.rules.useにoptionsで、ts-loaderはトランスパイルのみにしたところ、エラーは消えた。型チエックを外したためであるが、このままだと不正な型を許してしまうため、改めて考える必要がある。

  module: {
    rules: [
      {
        test: /\.(ts|js)$/,
        use: {
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
            configFile: 'tsconfig.json'
          }
        }
      }
    ]
  },