socekt.io-clientのEIO=3版をブラウザでES moduleとして読み込む備忘録その２

「socekt.io-clientのEIO=3版をブラウザでES moduleとして読み込む備忘録」の後にES module化に成功したので備忘録。
webpackでcommonjs出力して、rollupでES化した。
node.jsはv10.10.0を使用した。

git clone -b 2.3.x https://github.com/socketio/socket.io-client
cd socket.io-client
npm install
npm install --save-dev rollup rollup-plugin-terser

support/webpack.config.dev.jsを編集

    libraryTarget: 'umd',

を

    libraryTarget: 'commonjs',

へ修正。
rollup.config.jsを作成

import commonjs from '@rollup/plugin-commonjs';
import {terser} from 'rollup-plugin-terser';

export default {
  input: 'dist/socket.io.dev.js',
  output: {
    file: 'dist/socket.io.es.min.js',
    format: 'es',
  },
  plugins: [commonjs(), terser()]
};

Makefileを修正。buildに以下を追加する。

npx rollup -c

ビルドするとdist/socket.io.es.min.jsが生成する。

make build

これでhtmlファイルから

  <script type="module" src="./socket.io.es.min.js"></script>
  <script type="module">
    import  socketIoClient  from "./socket.io.es.min.js";
    const socket = socketIoClient.io("ws://example.com");
  </script>

などとして使用可能になった。

追記

wrapper.mjsを以下の内容で追加。

import socketIoClient from "./dist/socket.io.es.tmp.js";

export const io = socketIoClient.io;
export default io;

rollup.config.jsを以下のように編集する。

import commonjs from '@rollup/plugin-commonjs';
import {terser} from 'rollup-plugin-terser';

export default [{
  input: 'dist/socket.io.dev.js',
  output: {
    file: 'dist/socket.io.es.tmp.js',
    format: 'es',
  },
  plugins: [commonjs()]
},{
  input: 'wrapper.mjs',
  output: {
    file: 'dist/socket.io.es.min.js',
    format: 'es',
  },
  plugins: [terser()]
}];

ビルドしてdist/socket.io.es.min.jsを作成する。

make build

これでhtmlファイルから

  <script type="module" src="./socket.io.es.min.js"></script>
  <script type="module">
    import io from "./socket.io.es.min.js";
    const socket = io("ws://example.com");
  </script>

などとして使用可能になった。