dat.GUI というJSのライブラリを使いたかったけど、
npm, webpack, typescriptの構成で使おうとしていたんだけれども、
結局導入にあたり躓いた。。

だれかわかるひとがいれば、教えて欲しい。

dat.GUI とは

Googleのエンジニアが作成したライブラリで

https://workshop.chromeexperiments.com/examples/gui/

three.js などのサンプルによくついている、右上の方にある
好きな値を調整できるコントロールパネルが簡単に追加できるライブラリだ。

three.js でなくてもフロントエンドの開発時に微調整したいものがあるときに便利だ。

使い方は簡単で、以下のような感じで使用する。

var controls = new function() {
  this.message = 'dat.gui';
  this.speed = 0.8;
}

var gui = new dat.GUI();
gui.add(controls, 'message');
gui.add(controls, 'speed', -5, 5);    

コントロールパネルを使って値を変更すると、controls変数の各プロパティ値が変化していく。　

導入

おそらくいちばん簡単なのは、dat.gui.jsをダウンロードして、以下のように指定すれば使えるんだとおもう。。

<script type="text/javascript" src="dat.gui.js"></script>

CDNを使えば以下で利用できた。

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.4/dat.gui.min.js"></script>

npm, webpack, typescript

上記の方法で導入は出来る事は確認できたんだけど、
外部ライブラリはnodeで管理したいんだよね〜と思って色々試してみたんだけどうまくいかぬ。。。

一応、試してみたことを以下に残しておく。

ライブラリのインストール

npm install --save dat.gui
npm install --save-dev @types/dat-gui

インポート

import * as dat from "dat.gui";

そして、webpackでビルドするといろいろたりないようだ。。

必要そうなものをインストール

npm install --save-dev  css-loader
npm install --save-dev  sass-loader
npm install --save-dev  style-loader
npm install --save-dev  html-loader
npm install --save-dev  node-sass

今度はビルドすると以下のようなエラーがでる。

ERROR in ./~/dat.gui/src/dat/controllers/NumberControllerSlider.js
Module not found: Error: Can't resolve 'style' in '/Users/tyabuta/Desktop/ThreejsTest/node_modules/dat.gui/src/dat/controllers'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'style-loader' instead of 'style',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
 @ ./~/dat.gui/src/dat/controllers/NumberControllerSlider.js 17:0-71
 @ ./~/dat.gui/src/dat/index.js
 @ ./~/dat.gui/index.js
 @ ./app.ts
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./app.ts

see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

webpack v2 のマイグレーション記事で、以下のオプションをwebpack.config.js に追記すれば解決した。

    resolveLoader: {
        moduleExtensions: ["-loader"]
    }       

そして、ビルドは通った！

で、ブラウザでアクセスしてみるとこんなエラーがでる。。

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

この記述がどうやら問題のようだが、何が問題か全然わからぬ。。。

module.exports = GUI;

es6の話が出て来たりで、なんのこっちゃ〜ですよ。

おしまい

おそらく webpackとか色々理解できていないので、ちゃんと使えて無い気がする。
typescriptにこだわらず、CDNで普通に使う事にしよう。。

そもそも、buildディレクトリには既にビルドされたjs があるのに、
/node_modules/dat.gui/build/dat.gui.min.js

webpackで再度ビルドしようとしているのはなんでなんだろう。。