ES5 not supported?

[rob-bateman]

When trying to run browserify with tsify on my own typescript codebase, i get the following error:

Error: Parsing file /Users/robbateman/WebstormProjects/awayjs-core- 
ts/src/away/bounds/BoundingSphere.ts: Line 1: Missing from after import

after trying to get to the bottom of what this means, i happened across the esprima-fb module, which seems to be used by browserify to walk the source tree for dependencies.

Because Typescript is using ES5 spec, my imports are written (in the case of the erroring file above) as follows:

import BoundingVolumeBase           = require("away/bounds/BoundingVolumeBase"); 
import Matrix3D                     = require("away/core/geom/Matrix3D"); 
import Matrix3DUtils                = require("away/core/geom/Matrix3DUtils"); 
import PlaneClassification          = require("away/core/geom/PlaneClassification"); 
import Plane3D                      = require("away/core/geom/Plane3D"); 
import Transform                    = require("away/core/geom/Transform"); 
import Vector3D                     = require("away/core/geom/Vector3D"); 
import IEntity                      = require("away/entities/IEntity");

this of course doesn't match the ES6 spec, which appears to be what esprima-fb is using and why the error is generated by browserify.

Is there a strategy for ES5 typescript files that will work with tsify, or are we only able to consider ES3-compatible imports atm? Obviously having ES6-compatible imports in .ts files would be pointless for compilation purposes

[smrq]

Are you sure that you are including tsify as a plugin correctly? Those imports look correct, and the error message is what I would expect if the input got to browserify without being compiled to Javascript first. What does your build setup look like?

[rob-bateman]

ah, i don't have the exact setup as i've since overwritten it to something that precompiles the typescript before handing it to browserify. But to recreate the tsify implementation, it was something like:

glob('./src/away/**/*.ts', {}, function (error, files) {
    var b = browserify({
        debug: true,
        paths: ['./src']
    });

    files.forEach(function (file) {
        b.require(file, {expose:path.relative('./src', file.slice(0,-3))});
    });

    b.plugin('tsify', { target: 'ES5' })
        .bundle()
        .pipe(source('awayjs-core.js'))
        .pipe(gulp.dest('./build'));

    callback();
});

Is it possibly todo with the fact that i'm adding classes using require() rather than add() ? The latter isn't possible for me due to the fact that the classes have to be exposed for external use in an implementing application

[smrq]

Oh, that's an interesting setup. Yeah, that could very well be the culprit.
I'll try it out when I get back to my dev box.

One other thing that comes to mind immediately is that every file passed to
Browserify is considered an entry point, sort of like including each file
as a script tag. That's not really ideal because you might end up with
script ordering issues just like if you didn't use Browserify at all. So I
haven't really tested that scenario.
On Oct 1, 2014 6:38 PM, "Rob Bateman" notifications@github.com wrote:

ah, i don't have the exact setup as i've since overwritten it to something
that precompiles the typescript before handing it to browserify. But to
recreate the tsify implementation, it was something like:

glob('./src/away/*/.ts', {}, function (error, files) {
var b = browserify({
debug: true,
paths: ['./src']
});

files.forEach(function (file) {
    b.require(file, {expose:path.relative('./src', file.slice(0,-3))});
});

b.plugin('tsify', { target: 'ES5' })
    .bundle()
    .pipe(source('awayjs-core.js'))
    .pipe(gulp.dest('./build'));

callback();

});

Is it possibly todo with the fact that i'm adding classes using require()
rather than add ?

—
Reply to this email directly or view it on GitHub
#11 (comment).

[rob-bateman]

yeah i was initially worried about that too but to its credit browserify doesn't have any trouble with this approach as far as i can tell. Things run great, even with my code mess ;)

thanx for taking a look, be keen to see if a pure browserify implementation is possible as it would open the door to other possibilities like using watchify on my codebase

[smrq]

Oh, I take it back! Never respond to issues while drinking margaritas. :)

Using require instead of add means that no file is added as an entry
point, unless you pass the option entry: true. I'm not totally sure what
that actually means once the whole bundle is put together, but tsify looks
at the entry point(s) to determine what to compile, so that totally
explains the ultimate behavior you saw. I'll figure out what it should do
soon. Thanks for reporting, I'll figure this one out.

[smrq]

I fixed a small error on this end, but ultimately this issue is caused by browserify/browserify#937. Blocking on resolution of this issue. In the meantime, specify at least one file as an entry point!

[rob-bateman]

aha! ok interesting, will try it out. thanks for the update

[smrq]

Fixed way upstream in module-deps@3.5.8! No more hacks needed.