How to use excalibur.js and rollup.js?

[mogoh]

Hello.

I tried to make excalibur.js work with rollup.js.
Here is the result: https://github.com/mogoh/excalibur-exercise

I ran into this problem:

$ yarn rollup
yarn run v1.22.5
$ rollup --config

./src/ts/main.ts → public/js/...
[!] Error: 'Engine' is not exported by node_modules/excalibur/dist/excalibur.min.js, imported by src/ts/main.ts
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/ts/main.ts (1:9)
1: import { Engine } from "excalibur";
            ^
2: // game.ts
Error: 'Engine' is not exported by node_modules/excalibur/dist/excalibur.min.js, imported by src/ts/main.ts
    at error (/home/mogoh/src/github.com/mogoh/excalibur-exercise/node_modules/rollup/dist/shared/rollup.js:5265:30)
    at Module.error (/home/mogoh/src/github.com/mogoh/excalibur-exercise/node_modules/rollup/dist/shared/rollup.js:9835:16)
    at handleMissingExport (/home/mogoh/src/github.com/mogoh/excalibur-exercise/node_modules/rollup/dist/shared/rollup.js:9724:28)
    at Module.traceVariable (/home/mogoh/src/github.com/mogoh/excalibur-exercise/node_modules/rollup/dist/shared/rollup.js:10228:24)
    at ModuleScope.findVariable (/home/mogoh/src/github.com/mogoh/excalibur-exercise/node_modules/rollup/dist/shared/rollup.js:8747:39)
    at Identifier$1.bind (/home/mogoh/src/github.com/mogoh/excalibur-exercise/node_modules/rollup/dist/shared/rollup.js:4138:40)
    at NewExpression.bind (/home/mogoh/src/github.com/mogoh/excalibur-exercise/node_modules/rollup/dist/shared/rollup.js:2868:23)
    at NewExpression.bind (/home/mogoh/src/github.com/mogoh/excalibur-exercise/node_modules/rollup/dist/shared/rollup.js:8012:15)
    at VariableDeclarator.bind (/home/mogoh/src/github.com/mogoh/excalibur-exercise/node_modules/rollup/dist/shared/rollup.js:2868:23)
    at VariableDeclaration.bind (/home/mogoh/src/github.com/mogoh/excalibur-exercise/node_modules/rollup/dist/shared/rollup.js:2864:31)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Can someone help?

[mogoh]

So I tinkered around a bit. I changed the import from:

import { Engine } from "excalibur";

to:

import { Engine } from "../../node_modules/excalibur/dist/index.js";

This resulted in some problems:

First, it required rollup-plugin-styles and @rollup/plugin-image.
I personally don't like, that JavaScript/TypeScript includes CSS-files and images directly in the code.
It is off standard and the code does not work properly any more, without a bundler.

Second, it required core-js.
Is this a missing dependency?

Third, this error:

$ yarn rollup
yarn run v1.22.5
$ rollup --config

./src/ts/main.ts → public/js/...
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/excalibur/dist/Engine.js
1: var __extends = (this && this.__extends) || (function () {
                    ^
2:     var extendStatics = function (d, b) {
3:         extendStatics = Object.setPrototypeOf ||
...and 3 other occurrences
node_modules/excalibur/dist/Screen.js
1: var __assign = (this && this.__assign) || function () {
                   ^
2:     __assign = Object.assign || function(t) {
3:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 1 other occurrence
node_modules/excalibur/dist/Actor.js
1: var __extends = (this && this.__extends) || (function () {
                    ^
2:     var extendStatics = function (d, b) {
3:         extendStatics = Object.setPrototypeOf ||
...and 3 other occurrences

...and 34 other files
(!) Circular dependencies
node_modules/excalibur/dist/index.js -> node_modules/excalibur/dist/Engine.js -> node_modules/excalibur/dist/index.js
node_modules/excalibur/dist/Algebra.js -> node_modules/excalibur/dist/Util/Util.js -> node_modules/excalibur/dist/Algebra.js
node_modules/excalibur/dist/Collision/ConvexPolygon.js -> node_modules/excalibur/dist/Collision/BoundingBox.js -> node_modules/excalibur/dist/Collision/ConvexPolygon.js
...and 10 more
created public/js/ in 2.7s

"Circular dependencies" is a rollup problem. They are AFAIK not off standard and it should not be a problem.

"this has been rewritten to undefined" is something I can not assess.

Also, I get this runtime error:

Uncaught ReferenceError: require is not defined
    <anonymous> http://localhost:8080/js/main.js:3

[eonarheim]

1. The CSS and images do need to be bundled in to support some of the loader functionality, they do seem to work in webpack, parcel, and as a standalone script in the browser.

2. Ah good find! I think core-js is missing indeed! We have it listed in the main repo but not the dist (where things are currently published from). We are planning on retiring the dist repo in the next release so this should go away soon.

3. Hmm, that is odd because that's source generated from the TypeScript compiler. It's odd that they are causing complaints from Rollup. Perhaps switching excalibur compliation from es5 to es2015 modules will clear this up eventually? I'll look into this some more.

4. I'm also seeing this type of thing locally, as far as I can tell it looks like Rollup configuration issue?

[eonarheim]

Created a bug to keep track #1732

[mogoh]

Don't pay to much attention to 3. and 4.
I think this is more a rollup.js-thing.

[mogoh]

Next step:

I managed to handle the commonjs modules by adding the @rollup/plugin-commonjs-plugin.
Now I get stuck at this line:

Excalibur/src/engine/index.ts

Line 5 in a7d3015

export const EX_VERSION = process.env.__EX_VERSION;

I think it is wrong that this untransfromed line is in the packaged version of excalibur.js.

[eonarheim]

Hmm, it's only replaced in the UMD generation using the webpack define plugin. This is a good find, this should probably also be fixed up in the build process for the es modules.

[eonarheim]

Created a bug #1731

[eonarheim]

@mogoh I'm looking into this, I do want to put up a rollup template, however I'm currently struggling to configure rollup properly for a small example.

Perhaps a "bad" way to get things working is to use excalibur as an external like we did here (albeit a long while ago) you'll lose tree shaking unfortunately

• https://github.com/excaliburjs/ludum-41/blob/master/rollup.config.js

Currently we have templates in webpack/parcel that work pretty well in the current state if you need to get something up and running fast with the desired import { Engine } from 'excalibur' syntax.

• https://github.com/excaliburjs/template-ts-parcel
• https://github.com/excaliburjs/template-ts-webpack

[eonarheim]

@mogoh I pushed up a sub-optimal template https://github.com/excaliburjs/template-ts-rollup, it will be slightly better than this approach because we can control the version of excalibur via npm, but it still brings the entire excalibur source into the bundle. Excalibur's modules in the current state aren't ideal for rollup to consume.

Our upcoming release will switch excalibur to es2015 modules and we can also make use of the package module property to improve this rollup experience https://github.com/rollup/rollup/wiki/pkg.module

[mogoh]

Our upcoming release will switch excalibur to es2015 modules and we can also make use of the package module property to improve this rollup experience https://github.com/rollup/rollup/wiki/pkg.module

That sounds great! :D

[kamranayub]

Just another update, I just pushed Webpack v5 to our template now which is totally up-to-date: https://github.com/excaliburjs/template-ts-webpack

[mogoh]

Thank you for your in-depth response.
I now managed to get things working, after I read through your comments.

For me, there was only one thing missing.
I switched back from:

import { Engine } from "../../node_modules/excalibur/dist/index.js";

to:

import { Engine } from "excalibur";