Famous 0.3, AMD to CommonJS

In case any one’s interested, I converted Famous 0.3 from AMD-CommonJS hybrid to CommonJS. I did this because I’ve ported my personal site from a Node/express+JSPM setup to Meteor+Webpack, and Meteor’s new module system only supports ES2015 Modules and CommonJS, and I didn’t want to write some parts of my old experiments, so the conversion makes Famous 0.3 compatible in Meteor’s module system. I’m remaking the main part of my site with my prototype. I’ll post that soon!

Thanks Joe. I will be needing this in the near future (could use it now!) as I am creating my own modules to be shared between a node instance and the browser+famous.

However, I would really love to convert the famous 0.3.5 build environment (requirejs seed), to work with commomJS modules as well, i.e. replacing AMD and Almond. Any pointers or resource links on how to do this without breaking the remaining CI features on the seed?

I am a relative noob to JS and its support tools, so any help is greatly appreciated!

@dwardoh Where’s the requirejs seed? Is it this one?

Take a look at how the build system is here (you may have to read Webpack docs to understand it better). Then, I’d suggest for you to do something similar to that (using Webpack, but you can also use Browserify). I also have a webpack-based npm-package skeleton. You could adopt that, and then run npm run build in order to build your app. It includes ES6/7 via Babel.

In your package.json you can list the famous dependency like this:

  "famous": "trusktr/famous#commonjs"

so that when you run npm install in your project it will get my CommonJS version.

Let me know if you have any questions! :}

@joe Thanks so much for your response! Yes that is the one I am using. Ideally I’d like to convert that to use commonJS modules.

Thanks also for your two build skeleton links. I intend to learn and use webpack some day for my project, these are a great start. Any idea when npm will support ES2015 modules directly?

That I don’t know.

You’re best bet right now is to use Webpack or Browserify (as CommonJS isn’t RequireJS-friendly, and you may as well stick with the AMD version of Famous in that case).

I’d say start from scratch (perhaps learning what you can from the skeletons).

Another option could be to use the browserify-seed, which you can then add ES2015 support to. You’d have to add the babelify transform to it, so that it can use Babel to handle ES2015+ language features (including ES6 module syntax). You would then have to replace the dependency of famous to point to my repo, and remove the famousify transform, as that is designed for the AMD version of Famous.

Whichever path you choose, it’ll involve some work and getting familiar with Webpack or Browserify (personally I’d recommend Webpack, and I think that’ll be the easier path). There isn’t really a single-step solution. If you need some help with it, just let me know after you’ve tried and reached a road block. I’m happy to help. :}

@joe , fyi …

Regarding our prior discussion on JS dev stacks, you might be interested in this tool I just discovered for abstracting the creation of a JS development stack under a single CLI. It’s called kotatsu. Looks promising.

– Edward

Hello Edward, thanks for sharing! :] That’s a nice tool built on Webpack. It could definitely be useful!