VSCodeでThree.jsの開発環境を整える(2)IT風雲児のブログIT界の風雲児の破天荒なブログです。よかれとおもってやってます。Code上でコード補完付きでコーディングが可能な状態になったので、これをブラウザ上で実行可能な状態にコンパイルすることを考えます。VSCodeでのコード補完を利用するためにthree.jsをnpmからインストールしたのでそのままでは実行できず、同じくnpmで提供されているツールであるwebpackというコマンドを利用します。webpackコマンドをインストールするプロジェクトのルートディレクトリから、webpackをnpmコマンドでインストールします。ブログとかには-gオプションをつけてグローバルにインストールする記述が多いが、グローバル空間はあまり汚したくないのでプロジェクト内に閉じることにします。--save-dev--save-devオプションをつけることで、webpackモジュールがインストールされると同時に、プロジェクトのpackage.jsonにあるdevDependenciesに記録されます。これで、${PRJ_ROOT}/node_modules/.bin/webpackにコマンドがインストールされます。-v2.5.0みたいな感じになります。node_modules/.bin/webpackのように使っても機能しますが、より簡単のために、webpack.config.jsという名前の設定ファイルを作成します。これがコマンドを実行するカレントディレクトリに存在することで、引数なしでwebpackコマンドを実行できるようになります。ここで、<entry>というのはブラウザでページを読み込んだときに最初に呼ばれるべきスクリプト(今回の場合はthree.jsをrequireしているほうのスクリプト)を指します。以下に最低限と思われるentryとoutputだけ設定したwebpack.config.jsの例を記します。コンパイル元のJavaScriptファイルはsrcディレクトリ配下のindex.js、出力先はhtdocsのbundle.jsファイルとします。index.jsではthree.jsをrequireしているので、webpackを通してbundle.jsというファイルに統合されて出力してね、という設定です。pathは出力先のoutput設定で絶対パスを要求されたので、それを解決するためのモジュールです。}};上記がプロジェクトのディレクトリに存在すれば、webpackコマンドを実行するだけで、この設定に沿ったコンパイル処理が実行されます。ように呼び出せば、ブラウザからJavaScriptコードが実行される状態になります。上記の例では最終的にbundle.jsを呼び出すことになるHTMLファイルはあらかじめhtdocsファイルに静的なファイルとして存在していることとしています。調べてたところhtml-webpack-pluginというものが存在しているようですが、今回の例ではこれで十分とします。webpackはCSSファイルや各種リソースをまとめるものなので、必要に応じてこの設定ファイルは設定を追加していくことになるはずです。node_modules/.bin/webpackのようにコマンドを実行する必要があり、あまりスマートではありません。これを回避するのに${PRJ_ROOT}/node_modules/.bin/ディレクトリにパスを通すのも、そもそもグローバル環境を汚したくなかったのに本末転倒であって、これをnpm環境で統一することにして、package.jsonのscriptsという項目を使ってnpmコマンドを追加します。該当部分のみ転載します。},一つ目の"test"というのはデフォルトで入っていたものなので気にしないことにします。あとここのscriptsに書く際はすでにnode_modules/.bin/にパスが通っている状態だそうなので、webpackというコマンド名だけ書けば良いことになります。package.jsonに上記の設定があれば、以下のようにして単純に、webpackによるJavaScriptのビルドを実行することが可能です。build機能拡張にはnpmのものもあるようなので、必要であれば任意のショートカットを割り当ててさらに手軽に実行することが可能になると思います。https://marketplace.visualstudio.com/items?itemName=fknop.vscode-npmdocker上でWebサーバをホストするhtdocsに出力されたJavaScriptファイルをテストするのに、HTMLファイルをローカルファイルとして開くとセキュリティ上の制限が出てきたり、うまく動作しないことがあります。ブラウザ上の設定でこの制限を解除することは可能ですが、より実際の想定に近い環境としてlocalhost上にWebサーバとしてnginxを動作させ、これに静的なファイル群をホストさせて動作確認することにします。これはdockerがすでにインストールされている前提で、以下のようにして実行可能です。nginxこれで、http://localhost:8080でhtdocs内のファイルの動作確認が可能になります。Machine用の外部ディスクが不調になってしまったので、ディスク修復を試みました。試みたのですが途中で中断されてしまうので。fsckコマンドを試す。上記の環境でpylintをかけるとcv2のメンバがいないと怒られる。(実際はVSCode自体は関係ない。workspace..."あたりで起動がハングしてしまうことがあって、その対応メモ。Codeをバージョンアップしてみたらすごく速く使いやすくなっていたので、すこし本格的に環境を構築して使ってみることにしました。内部ネットワークが作成される。