nalのブログ

My opinions are my own.

Webpackで非モジュールJavaScriptをバンドルする

解決したい課題

非モジュールなJavaScript(×CommoJS,×ESModules)を全てscriptタグで読み込んでいる。
加えて grunt-bower-install でbowerモジュールもscriptタグで読み込み。
bower -> npm移行、モジュール化に向けてWebpackによるバンドルを行いたい。

解決案

module.jsの内容をindex.js読み込み時に実行する。

module.js

exports.moduleFunc = () => {
  console.log('moduleFunc');
}

index.js(エントリーポイント)

require('module').moduleFunc();

Webpackバンドル+Node.jsでの出力

$ node index.js
moduleFunc

結果

モジュールとなるJavaScriptをexportsでくくり、エントリーポイントでrequireすることで実行できた。
これで問題無ければnpm+Webpack環境の土台ができるはず、babelも通してESModulesにしたい。

追伸

こっちはこれくらいの軽いメモ程度で使えば更新増えそうな気がした。
Qiitaの方は良い感じの単位でまとめたものというので住み分けしたい。