S.F. Page

Programming,Music,etc...

コード整理とrollupによるビルド環境をnpm(package.json)で作る

ここ2-3日WebGL2.0のコード整理を行い、コメント付けをしていた。さらにモジュール化を行った。

https://bl.ocks.org/sfpgmr/47c33ee5ac5199e126fa6a6b2f974f80

ブラウザ限定で考えるならば、もうimport/exportって大丈夫かな?と思ったけど動くのはSafariだけのようだ。

http://caniuse.com/#feat=es6-module

ただモジュール化しておいたほうが良いと思ったので、rollupを使うことにした。 今のところはテストコードなので、gistを使っている。そして公開はbl.ocks.orgで行っている。 gistはディレクトリが使えない以外はgitレポジトリとして使えるし、非公開モードもあるから便利に使っている。 こういうお手軽環境なので、gulpとかの大げさなタスク・ランナーを使わないで、npm(package.json)だけでビルド環境を作ることにした。作った環境は以下の通り

  • rollupを使って、es6モジュールを1つのファイルにまとめる
  • browser-syncを使って簡易サーバー兼自動リロード環境を作る
  • watchによるソースコードのwatch

上記モジュールはすべてCLIで動かす必要があるため、グローバルインストールしてある。

package.jsonの中身は以下のとおりである。

{
  "name": "webgl2-0001",
  "version": "1.0.0",
  "description": "wgld.orgのソースコードをWebGL2ベースに書き換えてみる\r まずは三角形を描画してみる。",
  "main": "main.js",
  "scripts": {
    "test": "browser-sync start -s -f *.html *.js",
    "build": "rollup -c",
    "watch": "watch \"npm run build\" ./ --filter=filter.js --wait=0 --interval=1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@gist.github.com/47c33ee5ac5199e126fa6a6b2f974f80.git"
  },
  "keywords": [
    "WebGL2.0"
  ],
  "author": "S.F.",
  "license": "MIT",
  "bugs": {
    "url": "https://gist.github.com/47c33ee5ac5199e126fa6a6b2f974f80"
  },
  "homepage": "https://gist.github.com/47c33ee5ac5199e126fa6a6b2f974f80",
  "devDependencies": {
  }
}

rollupのコンフィグファイル(rollup.config.js)は以下のとおりである。

// rollup.config.js
export default {
  entry: 'main.js',
  format:'iife', 
  dest: 'bundle.js' // equivalent to --output
};

watchは、jsファイルのみ認識し、bundle.jsファイルは除外したいため、以下のようなフィルタスクリプトを作った。

function filter(f){
  if(f.match(/\.js/i)){
    if(f.match(/bundle\.js/i)) return false;
    return true;
  }
  return false;
}
module.exports = filter;

これによって所望の環境を作ることができた。

これをベースにソースコードを改造していくつもりであるが、その前にモデル・ビュー・プロジェクションの各行列の中身をきちんと理解しようとしていろいろあちこち調べているところで、これが結構時間がかかりそうだ。

このサイトが比較的よくまとまっていると思った。

https://sbfl.net/blog/2016/09/05/webgl2-tutorial-3d-knowledge/

気が向いたら備忘録がてらそのあたりもまとめるつもりである。