PlayCanvasでTypeScriptを使うためのメモ(Webpack編)

概要

前回の記事でwebpackを使わず、無理やりコードを追加することでモジュール問題を解消しましたが、
今回は、そもそもああいったモジュール問題を解決するためにあるWebpackを利用したgulpタスクを作ります。

Webpackの設定

ポイントとしては、PlayCanvasライブラリは実行時に別の形で(たぶんScriptタグで)読み込まれるため、externalで生成されるJavaScriptコードに組み込まないように設定しておく必要があります(そうしないと競合するのでたぶん動かない)

webpack.config.js

const path = require("path");
const glob = require("glob");

module.exports = {
  mode: "development",
  //mode: 'production',
  devtool: "",
  entry: glob.sync("./src/*.ts"),
  output: {
    filename: "output.js",
    path: path.resolve(__dirname, "dist/"),
  },
  externals: [
    {
      playcanvas: 'pc'
    }
  ],
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: "ts-loader"
      },
    ]
  },
  resolve: {
    extensions: [".ts", ".js"]
  },
};

gulpfile.js

WebPack未使用版との違いは、TypeScriptのトランスパイルをWebpack経由にしていることです。その関係で前回はgulpfile.js上で直接TypeScriptのオプションを設定していましたが、今回はtsconfig.jsonで設定をしておく必要があります。

gulpfile.js

const gulp = require("gulp");
const playcanvas = require("gulp-playcanvas");
const pcOptions = require("./playcanvas.json");
const webpackStream = require('webpack-stream');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');

gulp.task("ts", () => {
  return webpackStream(webpackConfig, webpack)
  .pipe(gulp.dest('./dist/'))
  .pipe(playcanvas(pcOptions));
});

gulp.task("js", () => {
  return gulp
    .src(["src/**/*.js", "!src/**/_*.js", "!./node_modules/**"])
    .pipe(gulp.dest("dist/"))
    .pipe(playcanvas(pcOptions));
});

gulp.task("watch", function() {
  gulp.watch(["src/**/*.ts", "!src/**/_*.ts", "!./node_modules/**"], gulp.task("ts"));
  gulp.watch(["src/**/*.js", "!src/**/_*.js", "!./node_modules/**"], gulp.task("js"));
});

gulp.task("default", gulp.parallel("watch"));

感想

これで、トランスパイルに成功するとoutput.jsという単一のJavascriptファイルが生成され、PlayCanvasにアップロードされます。

眺めるとそこそこの量のコードがWebpackによって追加されるので、小規模なものだと気になるかもしれませんね…

規模によって使い分けるといいのではないでしょうか。