Help us understand the problem. What is going on with this article?

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

概要

前回の記事(準備編)でアセットをアップロードするための設定までやりましたが、今回はgulpを使ってトランスパイルからアップロードまで一括で行えるようにgulpタスクを作ります。

なぜgulpを使うのかというと、前回の記事にも書いた通り、PlayCanvas用のgulpタスクが公開されているからです。

gulpfile.js

後述の問題のため、through2というgulp用のプラグインを使い、トランスパイル後のコードの先頭に2行ほどコードを書き加えるという泥臭い処理を行っています…(´・ω・`)

gulpfile.js
const gulp = require("gulp");
const playcanvas = require("gulp-playcanvas");
const pcOptions = require("./playcanvas.json");
const typescript = require("gulp-typescript");
const through2 = require('through2');

gulp.task("ts", () => {
  return gulp
    .src(["src/**/*.ts", "!src/**/_*.ts", "!./node_modules/**"])
    .pipe(typescript({target: "ES5", module: "commonjs"}))         //ES5
    //.pipe(typescript({target: "ES2015", module: "commonjs"}))    //ES2015(ES6)
    .pipe(through2.obj((file, enc, callback) => {
      if (file.isBuffer()) {
        let contents = String(file.contents);
        contents = "var exports = {};\nvar require = function(mod){};\n" + contents;
        //contents = "/*jshint esversion: 6, asi: true, laxbreak: true*/\n" + contents;   //ES2015(ES6)
        file.contents = Buffer.from(contents);
      }
      callback(null, file);
    }))
    .pipe(gulp.dest("dist/"))
    .pipe(playcanvas(pcOptions));
});

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

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

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

モジュール問題

トランスパイルしたコードの先頭に付け足す理由はモジュール機構の問題になります、ざっくり挙げると

  • トランスパイルしただけのJavascriptコードそのままではモジュール機構の関係でPlayCanvas上ではエラーになります。
  • ブラウザ環境ではES2015(ES6)形式のモジュールしかサポートされていません(IEの場合はモジュール自体対応していません)
  • ES2015形式でimportすると、Playcanvasの実行時にエラーが出ます(importはトップレベルに記載する必要があるのですがランタイム上でスクリプトは下位へ移動されるから?)
  • AMDやUMDはブラウザ上でも動くモジュール形式だそうですが、非同期だからなのかPlayCanvasエディタでアトリビュートを読み込めないので意味がありません

これをいろいろどうにかする方法を探りましたが、最も簡単で無難だったのが、commonjs形式でトランスパイルした上で

var exports = {};
var require = function(mod){};

という何もしないモジュール関係の変数と関数を定義するコードを付け足すことでした。
もっといい方法があればだれか教えてください…

そのためのWebpack

そもそもこういったモジュール機構の問題を解決するためにWebpackがあるので、
次回はWebpackを使ってあんなことをしなくてもPlaycanvasで使えるコードを生成するためのタスクを作ります。

riafeed
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした