video-dev/hls.jsをnode.js向けにビルドしたい

video-dev/hls.jsをnode.js向けにビルドしたいと考えています。

しかし、実際にwebpackを用いてビルドして、node.jsでrequire('./hls.js');をしてもhls.jsのモジュールをロードすることができずに困っています。

bash
1> $ node
2> const hls = require('./hls.js');
3undefined
4> hls
5{}
6>

ソースコードを見てもexport defaultされているので外部から呼び出しができると思うのですが、nodeでrequireしても{}と表示され、何もロードできません。

ビルドの設定が間違っているのでしょうか。解決策がわかる方教えてください。

webpack.config.jsは下のようにしています。

javascript
1const pkgJson = require('./package.json');
2const path = require('path');
3const webpack = require('webpack');
4const merge = require('webpack-merge');
5const importHelper = require('@babel/helper-module-imports');
6
7/* Allow to customise builds through env-vars */
8const env = process.env;
9
10const addSubtitleSupport = !!env.SUBTITLE || !!env.USE_SUBTITLES;
11const addAltAudioSupport = !!env.ALT_AUDIO || !!env.USE_ALT_AUDIO;
12const addEMESupport = !!env.EME_DRM || !!env.USE_EME_DRM;
13
14const createDefinePlugin = (type) => {
15  const buildConstants = {
16    __VERSION__: JSON.stringify(pkgJson.version),
17    __USE_SUBTITLES__: JSON.stringify(type === 'main' || addSubtitleSupport),
18    __USE_ALT_AUDIO__: JSON.stringify(type === 'main' || addAltAudioSupport),
19    __USE_EME_DRM__: JSON.stringify(type === 'main' || addEMESupport)
20  };
21  return new webpack.DefinePlugin(buildConstants);
22};
23
24const basePlugins = [
25  new webpack.optimize.ModuleConcatenationPlugin(),
26  new webpack.optimize.OccurrenceOrderPlugin(),
27  new webpack.BannerPlugin({ entryOnly: true, raw: true, banner: 'typeof window !== "undefined" &&' }) // SSR/Node.js guard
28];
29const mainPlugins = [...basePlugins, createDefinePlugin('main')];
30const lightPlugins = [...basePlugins, createDefinePlugin('light')];
31
32const baseConfig = {
33  mode: 'development',
34  entry: './src/hls',
35  target: 'node',
36  optimization: {
37    splitChunks: false
38  },
39  resolve: {
40    // Add `.ts` as a resolvable extension.
41    extensions: ['.ts', '.js']
42  },
43  module: {
44    strictExportPresence: true,
45    rules: [
46      {
47        test: /.(ts|js)$/,
48        exclude: [
49          path.resolve(__dirname, 'node_modules')
50        ],
51        loader: 'babel-loader',
52        options: {
53          babelrc: false,
54          presets: [
55            '@babel/preset-typescript',
56          ],
57          plugins: [
58            ['@babel/plugin-proposal-class-properties', {
59              loose: true
60            }],
61            '@babel/plugin-proposal-object-rest-spread',
62            {
63              visitor: {
64                CallExpression: function (espath) {
65                  if (espath.get('callee').matchesPattern('Number.isFinite')) {
66                    espath.node.callee = importHelper.addNamed(espath, 'isFiniteNumber', path.resolve('src/polyfills/number-isFinite'));
67                  }
68                }
69              }
70            }
71          ]
72        }
73      }
74    ]
75  },
76  node: {
77    global: false,
78    process: false,
79    __filename: false,
80    __dirname: false,
81    Buffer: false,
82    setImmediate: false
83  }
84};
85
86function getAliasesForLightDist () {
87  let aliases = {};
88
89  if (!addEMESupport) {
90    aliases = Object.assign({}, aliases, {
91      './controller/eme-controller': './empty.js'
92    });
93  }
94
95  if (!addSubtitleSupport) {
96    aliases = Object.assign(aliases, {
97      './utils/cues': './empty.js',
98      './controller/timeline-controller': './empty.js',
99      './controller/subtitle-track-controller': './empty.js',
100      './controller/subtitle-stream-controller': './empty.js'
101    });
102  }
103
104  if (!addAltAudioSupport) {
105    aliases = Object.assign(aliases, {
106      './controller/audio-track-controller': './empty.js',
107      './controller/audio-stream-controller': './empty.js'
108    });
109  }
110
111  return aliases;
112}
113
114const multiConfig = [
115  {
116    name: 'debug',
117    mode: 'development',
118    output: {
119      filename: 'hls.js',
120      chunkFilename: '[name].js',
121      sourceMapFilename: 'hls.js.map',
122      path: path.resolve(__dirname, 'dist'),
123      publicPath: '/dist/',
124      library: 'Hls',
125      libraryTarget: 'umd',
126      globalObject: 'this' // https://github.com/webpack/webpack/issues/6642#issuecomment-370222543
127    },
128    plugins: mainPlugins,
129    devtool: 'source-map'
130  },
131  {
132    name: 'dist',
133    mode: 'production',
134    output: {
135      filename: 'hls.min.js',
136      chunkFilename: '[name].js',
137      path: path.resolve(__dirname, 'dist'),
138      publicPath: '/dist/',
139      library: 'Hls',
140      libraryTarget: 'umd',
141      globalObject: 'this'
142    },
143    plugins: mainPlugins,
144    devtool: 'source-map'
145  },
146  {
147    name: 'light',
148    mode: 'development',
149    output: {
150      filename: 'hls.light.js',
151      chunkFilename: '[name].js',
152      sourceMapFilename: 'hls.light.js.map',
153      path: path.resolve(__dirname, 'dist'),
154      publicPath: '/dist/',
155      library: 'Hls',
156      libraryTarget: 'umd',
157      libraryExport: 'default',
158      globalObject: 'this'
159    },
160    resolve: {
161      alias: getAliasesForLightDist()
162    },
163    plugins: lightPlugins,
164    devtool: 'source-map'
165  },
166  {
167    name: 'light-dist',
168    mode: 'production',
169    output: {
170      filename: 'hls.light.min.js',
171      chunkFilename: '[name].js',
172      path: path.resolve(__dirname, 'dist'),
173      publicPath: '/dist/',
174      library: 'Hls',
175      libraryTarget: 'umd',
176      libraryExport: 'default',
177      globalObject: 'this'
178    },
179    resolve: {
180      alias: getAliasesForLightDist()
181    },
182    plugins: lightPlugins,
183    devtool: 'source-map'
184  },
185  {
186    name: 'demo',
187    entry: './demo/main',
188    mode: 'development',
189    output: {
190      filename: 'hls-demo.js',
191      chunkFilename: '[name].js',
192      sourceMapFilename: 'hls-demo.js.map',
193      path: path.resolve(__dirname, 'dist'),
194      publicPath: '/dist/',
195      library: 'HlsDemo',
196      libraryTarget: 'umd',
197      libraryExport: 'default',
198      globalObject: 'this' // https://github.com/webpack/webpack/issues/6642#issuecomment-370222543
199    },
200    plugins: mainPlugins,
201    devtool: 'source-map'
202  }
203].map(config => merge(baseConfig, config));
204
205// webpack matches the --env arguments to a string; for example, --env.debug.min translates to { debug: true, min: true }
206module.exports = (envArgs) => {
207  let configs;
208  if (!envArgs) {
209    // If no arguments are specified, return every configuration
210    configs = multiConfig;
211  } else {
212    // Find the first enabled config within the arguments array
213    const enabledConfigName = Object.keys(envArgs).find(envName => envArgs[envName]);
214    // Filter out config with name
215    const enabledConfig = multiConfig.find(config => config.name === enabledConfigName);
216    if (!enabledConfig) {
217      throw new Error(`Couldn't find a valid config with the name "${enabledConfigName}". Known configs are: ${multiConfig.map(config => config.name).join(', ')}`);
218    }
219
220    configs = [enabledConfig];
221  }
222
223  console.log(`Building configs: ${configs.map(config => config.name).join(', ')}.\n`);
224  return configs;
225};
226