CesiumGS / gltf-pipeline

Content pipeline tools for optimizing glTF assets. :globe_with_meridians:
Apache License 2.0
1.94k stars 251 forks source link

Bundling gltf-pipeline #332

Open donmccurdy opened 7 years ago

donmccurdy commented 7 years ago

I spent a little time trying to get this to work, and (SPOILER) didn't solve it, but thought I'd post what I tried here in case anyone has ideas, or just wants to avoid making the same mistakes.

In both cases, I changed the gltf-pipeline index.js entrypoint to a minimal subset that still included Cesium:

// index.js
var addDefaults = require('./lib/addDefaults');
var output = addDefaults({});
console.log(output);

And, created an entry point to Cesium that didn't wrap with RequireJS:

/*eslint-env node*/
'use strict';
module.exports = require('./Source/Cesium');

Browserify + deamdify

Let's try Browserify's deamdify transform.

browserify -t deamdify index.js -o bundle.js

Also added this to Cesium's package.json:

  "browserify": {
    "transform": "deamdify"
  },

It seemed to run, but I was getting errors about opening too many files, despite already having ulimit -n 10000 set.

Rollup + rollup-plugin-amd

Used rollup-plugin-amd and some other stuff.

Rollup config:

import amd from 'rollup-plugin-amd';
import commonjs from 'rollup-plugin-commonjs';
import glsl from 'rollup-plugin-glsl';
import nodeResolve from 'rollup-plugin-node-resolve';
import lookup from 'module-lookup-amd';
import path from 'path';

export default {
    input: 'index.js',
    output: {file: 'bundle.js', format: 'cjs'},
    plugins: [
        nodeResolve(),
        amd({
            include: 'node_modules/cesium/Source/**/*.js',
            rewire: function (moduleId, parentPath) {
                return lookup({
                    partial: moduleId,
                    filename: parentPath,
                    config: {
                      paths: {
                        Cesium: path.join(__dirname, 'node_modules/cesium/Source')
                      },
                      nodeRequire: require
                    }
                });
            }
        }),
        commonjs(),
        glsl({
          include: [
            'node_modules/cesium/Source/Shaders/**/*.glsl',
            'node_modules/cesium/Source/ThirdParty/Shaders/**/*.glsl'
          ]
        })
    ]
};

Problems encountered:

  1. Anywhere this pattern is used:

    if (!FeatureDetection.supportsTypedArrays()) {
        return {};
    }

    .... rollup choked, saying that you can't have a return statement outside of a function. Maybe refactoring the files to use an IIFE, and only have one top-level return, would fix this?

  2. After commenting all of those early-return lines out, Rollup runs for a few seconds, but then I get this error, like it's trying to include CSS somewhere?

index.js → bundle.js...
[!] Error: Unexpected token
node_modules/cesium/Source/Widgets/Animation/Animation.css (1:0)
1: .cesium-animation-theme {
   ^
2:     visibility: hidden;
3:     display: block;
lilleyse commented 7 years ago

Thanks for looking into this @donmccurdy.