How to bundle - using Typescript + Three.js + GLTFLoader?

Questions
1

Hi.

I’m trying to make JavaScript that is created from TypeScript to run in browser.

I’ve done reading about JS module systems, and it seems pretty hard to grasp in short time. I’ve tried Browserify, Webpack and Parcel examples and watched a handful of basics tutorials, but those don’t really seem to translate into working code when trying out the same steps with Three.js…

I’ve put part of my code in Typescript class Game. Then I have other part in TS class GameUI. I’ve tried exporting GameUI and importing it to Game class, I get this done so that import seems to be ok, no red squiggly lines and code seems to be finding Three functions. TS compiles without errors.

But when I compile the TS code to js code, then run (for example) webpack, the resulting bundle.js run from index.html (for example) seems to always end up being a mess, with “define is not defined”, or Three code not able to find Vector3 for example… I’ve tried to set tsconfig module to amd, commonjs and also tried “moduleResolution”: “node” and other stuff I’ve found here and on stack overflow… these don’t seem to matter. Seems like I’m still missing some key pieces of information I need to know…

Are there any up to date examples on this topic? Three.js manual only has single page on this topic, and it is very superficial.

2

I’m using TypeScript + Three.js + Webpack. I make webpack to generate bundle directly from ts files. It’s quite simple to follow this: https://webpack.js.org/guides/typescript/

3

Thanks but it isn’t quite that simple in this case…

I probably didn’t mention, but I already went through that specific tutorial. It lacks detail and turned to be not enough.

I got the issue solved, and got everything bundled and working, but I had to resort in changing a lot of my TS source code.

Seems like Webpack didn’t like the code TS compiler generated for some reason… or maybe it is related to Three.js, as all errors where related to only Three… also probably my code quality, but I didn’t find any specific explanations while googling these messages pretty extensively.

4

Sorry if ‘quite simple’ sounds offensive…My English is not very good.:persevere:
I had no difficult to generate bundle from ts code directly by webpack and I am a totally new bee to web development. I wanted to point out that I didn’t compile the code to js by ts command, I let webpack to do that for me like the tutorial teached. There are no js files appear in my source directory in the progress of compiling and packing. Glad that you solved your issue.

If you are interested, this is my webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin  = require("html-webpack-plugin")
const {CleanWebpackPlugin}  = require("clean-webpack-plugin")
module.exports = {
  devtool: 'source-map',
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
	  {
		test: /\.glsl$/,
		use: 'raw-loader'
	  }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js', '.glsl' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
	compress: true,
	port: 9000,
	hot: true,
	inline: true
  },
  plugins:[
	new HtmlWebpackPlugin({
		title: "lib-webgl.html",
	}),
	new CleanWebpackPlugin(),
  ],
  watch: true,
  watchOptions: {
	ignored: /node_modules/,
	aggregateTimeout: 300,
	poll: 100
  }
};

And by webpack --config webpack.config.js, I can get bundle.js from my ts codes directly. By webpack-dev-server --open, I can run the html which webpack-dev-server generated for me from my ts codes.

1 Like
5

No offense taken, not a native English speaker either.

After figuring out things I didn’t compile the code myself either with ts compiler manually (but either way, I guess Webpack will just run the compiler for you in any case…). I didn’t end up having JS files with this method, same as you.

I didn’t have trouble following those pretty synthetic examples found on the internet, but then again - those weren’t using Three.js, GLTFLoader and some other stuff (which didn’t cause any headaches)… also, using Webpack seemed pretty straightforward.

But despite of this, the code didn’t work.

Like I said I had to change many things I expected to work, and all those were errors during run-time, only related to calling three.js functions.

No problems with other code in that sense, although like I said, my code is probably pretty flaky.

I guess what I’m trying to say, is that this kind of pipeline should be explained in the docs, so that people can see if they are doing something wrong - now it is just pure guesswork.

Edit:
Thank you for sharing your config. It might be helpful if I / anyone else has similar issues.

1 Like
6

I guess I get what you mean finally. I agree that it should be more docs for beginners. I am not experienced enough to do that, I plan to share a simple dev environment on github for totally fresh men to three.js or web developemnt like me.

1 Like