publish to npm

[famous]

publish to npm

[MylesBorins]

Hey @substack

This is something we are currently discussing in house about the best way to approach. We want to support a variety of forms of module loading. With the current way we are using require it is actually fairly trivial to convert to common, and we are investigating the best ways to automate this process (something like browserify-ftw looks like overkill though).

[mizchi]

👍

[aelr]

@substack Do you have any ideas of how a CommonJS port could be used through npm where:

1. Only the Famo.us modules in use are loaded
2. You don't end up with relative require calls into node_modules (e.g., require('../node_modules/famous/core/Surface')?

As far as I'm aware it's not doable. But it would be great if the require calls could be the same as what is currently used for RequireJS (e.g., require('famous/core/Surface')).

Until a better solution is found, I'm maintaining a CommonJS port and using it through Bower. As @thealphanerd said, it was pretty trivial to convert. My require calls look like: require('../lib/famous-commonjs/core/Surface').

[mpj]

I'd love this, too. I really, really don't want to drag bower into my project just for this.

At Spotify, we use npm+browserify for everything and it's amazingly good. I had to do quite a bit of welding to get it into a browserify project. If releasing to npm was part of your release process, this would be solved once instead of us all inventing different solutions to get it to work.

Right now, here is how I hack around it, for anyone interested:

install_famous.sh

#!/bin/bash
# Temporary hack until Famo.us comes to their senses
# and publishes on npm.
rm -rf amd-modules/famous
git clone https://[email protected]/Famous/famous.git amd-modules/famous
cd amd-modules/famous
git fetch --tags
git checkout 0.1.2

Added to package.json

  "browserify": {
    "transform": [
      "deamdify"
    ]
  },
  "devDependencies": {
    "deamdify": "~0.1.1"
  },
  "scripts": {
    "test": "mocha",
    "postinstall": "./install_famous.sh ; gulp"
  },

In code

var Surface = require('../amd-modules/famous/core/Surface')

[speigg]

Try webpack + bower. Webpack works out of the box with AMD and Commonjs, just have to add the bower-components to your webpack.config. Webpack also builds my project an order of magnitude faster than browserify. Here is an example webpack.config similar to the one I use:

module.exports = {
  context: __dirname + "/src",
  entry: {
    main: "./main",
  },
  output: {
    path: __dirname + "/dist",
    filename: "[name].js",
  },
  resolve: {
    root: __dirname + "/src",
    modulesDirectories: ["bower_components", "web_modules", "node_modules"]
  },
  devtool: "inline-source-map"
}

This allows you to use var Surface = require('famous/core/Surface') in your CommonJS or AMD code (after installing famous as a bower dependency).

Nice speigg. Thanks.

@aelr You never ever do this: require('../node_modules/famous/core/Surface')

I'm not sure where you're getting that from? You just do require('famous/core/Surface') which traverses up the parent directories looking for matching subdirectories inside of node_modules. https://github.com/substack/browserify-handbook#how-node_modules-works

[aelr]

@substack Amazing. I'd not yet seen a module that utilizes that functionality, so didn't know it worked that way. So then, a CommonJS port of Famo.us makes much more sense than I thought and could be used via NPM or Component in the same way as the Require.JS implementation.

[speigg]

@aelr or just use webpack :)

[aelr]

Of all of those tools (webpack, browserify, commonjs-everywhere), I could only get browserify to work on Windows with watching. It's what I'm using now.

[MylesBorins]

I have something cooking up right now… a proper and working common port may be very very close :D

On May 30, 2014, at 6:30 AM, aelr [email protected] wrote:

Of all of those tools (webpack, browserify, commonjs-everywhere), I could only get browserify to work on Windows with watching. It's what I'm using now.

—
Reply to this email directly or view it on GitHub.

[aelr]

For now, you could add this to your package.json file:

"famous": "git://github.com/aelr/famous-commonjs.git"

[talves]

@thealphanerd that will come in handy 👍

[MylesBorins]

@aelr

Fwiw you do not need to change any of the references to relative paths, this is tested and verified.

On May 30, 2014, at 9:07 AM, Tony Alves [email protected] wrote:

@thealphanerd that will come in handy

—
Reply to this email directly or view it on GitHub.

I believe this is currently fixed. https://www.npmjs.org/package/famous
Myles is my hero.

[AdrianRossouw]

hear hear.

[MylesBorins]

npm install famous now works as expected

Hooray!!!