Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@riafeed

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によって追加されるので、小規模なものだと気になるかもしれませんね…

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

0
Help us understand the problem. What is going on with this article?
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
riafeed

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?