wtfil / koa-browserify

Koa browserify middleware
MIT License
7 stars 1 forks source link

6to5ify #1

Open konsumer opened 9 years ago

konsumer commented 9 years ago

I am probably missing something, but I can't seem to use 6to5ify.

var koa = require('koa'),
    app = koa(),
    serve = require('koa-static'),
    browserify = require('koa-browserify'),
    to5ify = require('6to5ify'),
    path = require('path'),
    port = process.env.PORT || 3000,
    staticPublic = path.join(__dirname, '..', 'public');

app.use(browserify({
    root: staticPublic,
    debug: process.env.NODE_ENV !== 'production',
    production: process.env.NODE_ENV === 'production',
    transform: to5ify
}));
app.use(serve(staticPublic));

app.listen(port);

In my browser, I get this error:

 Uncaught ReferenceError: regeneratorRuntime is not defined

when I try to use a generator.

wtfil commented 9 years ago

Hi @konsumer!

Probably you have to enable generators in 6to5ify According to doc you should use this:

app.use(browserify({
    root: staticPublic,
    debug: process.env.NODE_ENV !== 'production',
    production: process.env.NODE_ENV === 'production',
    transform: to5ify.configure({
        blacklist: ["generators"]
    }))
}));
konsumer commented 9 years ago

Thanks! It works in Chrome 39.0.2171.99 (64-bit), but then so does this:

app.use(browserify({
    root: staticPublic,
    debug: process.env.NODE_ENV !== 'production',
    production: process.env.NODE_ENV === 'production',
}));

(no 6to5ify.) Is this just ignoring transpiling generators? Isn't that what 6to5 is for? Here is my test case:

function *foo() {
    var i = 0;
    while(i+=1) yield i;
}

var it = foo();
console.log( it.next().value );
console.log( it.next().value );
console.log( it.next().value );
console.log( it.next().value );
wtfil commented 9 years ago

@konsumer 6to5ify is for compiling es6 to es5 and generator is the part of es6. So 6to5ify can compile your code with generators into old one. If you are using browserify without transformations it will not compile any of es6 code

However, new browsers did support part of es6 draft, so you code will be partial working even without any transformation :) If you are using only generators and does not supporting lots of browsers, you can omit the 6to5ify

Does you code works in chrome?

konsumer commented 9 years ago

Right, that is my question. I am using 6to5 because I want to use ES6 features like generators and support older browsers. Your suggestion was to put generators in the blacklist which would effectively make it useless for me, right? My point is that it doesn't solve my issue, it just skips transforming the code that caused it to have an issue, but in that case it obviously doesn't do what it was intended for, and I might as well leave out 6to5, all the way. Maybe this is more of a question for the 6to5ify folks. I figured that it might have something to do with the funny way koa-browserify handles transforms.

wtfil commented 9 years ago

Ah! I got the point. According to https://github.com/6to5/6to5ify/issues/28, you have to add regenerator.runtime

I've updated koa-browserify to allow pass runtime options

var browserify = require('koa-browserify'),
      6to5ify = require('6to5ify');

app.use(browserify({
    root: './public',
    transform: 6to5ify,
    runtime: require.resolve('regenerator/runtime')
}));

(also you should have regenerator in list of decencies)

konsumer commented 9 years ago

I get the same error with this:

var koa = require('koa'),
    app = koa(),
    serve = require('koa-static'),
    browserify = require('koa-browserify'),
    to5ify = require('6to5ify'),
    path = require('path'),
    port = process.env.PORT || 3000,
    staticPublic = path.join(__dirname, 'public');

app.use(browserify({
    root: staticPublic,
    debug: process.env.NODE_ENV !== 'production',
    production: process.env.NODE_ENV === 'production',
    transform: to5ify,
    runtime: require.resolve('regenerator/runtime')
}));

app.use(serve(staticPublic));

console.log('http://0.0.0.0:' + port)
app.listen(port);

I saw suggested here that I should require("6to5/polyfill"); in my client-side code. After doing that I still get the error.

My package.json looks like this, right now:

{
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "6to5": "^2.13.5",
    "6to5ify": "^3.1.2",
    "koa": "^0.15.0",
    "koa-browserify": "^0.1.0",
    "koa-static": "^1.4.8",
    "regenerator": "^0.8.9"
  }
}
konsumer commented 9 years ago

Here is a complete example.