Add script to output babel with source maps

[ericandrewlewis]

This makes debugging easier to read when including ProseMirror as a submodule.

I added this in package.json

{
    "scripts": {
        "dist-with-source-maps": "babel --source-maps inline -d dist src"
    }
}

but I'm not sure that makes sense as a script.

[marijnh]

Well, dist is supposed to refer to the stuff that we distribute, which at the moment is code without source maps. I can see how this would be useful, but I think using one path for multiple different build artifacts is too confusing. So I am not willing to include this in the package.json

Is directly using the ES6 source an option in your case?

[ericandrewlewis]

Is directly using the ES6 source an option in your case?

Sort of. I'm using prosemirror as a dependency. Browserify won't transform modules in node_modules by default.

If we define the browserify options in the prosemirror package.json like this

{
    "browserify": {
        "transform": [["babelify", { "presets": ["es2015"] }]]
    }
}

then I can compile my script with source maps all the way to ProseMirror module sources like so

node_modules/.bin/browserify src/index.js --debug --outfile dist/index.js -t [ babelify --presets [ es2015 ] --sourceMaps ]

[marijnh]

If we define the browserify options in the prosemirror package.json like this

That would, if I understand it correctly, force everyone to run ProseMirror through babelify, even if they are importing from the dist/ directory. That doesn't seem desirable.

For debugging, I've started using my moduleserve shim. It may not be trivial to get to work in your setup, but you might want to look at it -- it really removes a lot of the waiting and wasted work from the edit-debug cycle.

Or alternatively, just run the babel command manually in your checkout

[ericandrewlewis]

Perhaps this speaks to my naïveté of writing an npm package with a dependency. Maybe some higher level questions will be better for discussion.

Should sub-package authors not expect to have sourcemaps of ProseMirror package modules? This is my main question, as when working on a sub-package it would be helpful to step through PM source rather than babel-ified JS.

Should ProseMirror sub-packages (e.g. a package that provides a Youtube embed node type) only include ProseMirror packages via dist, and never use modules from src? If so, maybe we should consider not exposing src in the npm package. I see other npm packages setup this way. e.g. a babel sub-package has a src directory, but after installing that module via npm install babel-helper-bindify-decorators, the src directory does not exist, only the lib directory in node_modules/babel-helper-bindify-decorators. Are there standard conventions for npm packages to handle this?

[marijnh]

Are there standard conventions for npm packages to handle this?

My impression is that there aren't yet, and people are doing various things, all of which have drawbacks.

I'm looking at the cross-compile-during-development step as something that will go away relatively soon, as browsers ramp up their ES6 support. It may be that bundling remains necessary, since even with HTTP2, I couldn't get pushing a huge amount of small packages to a browser working all that fast. And of course, for production you'll want to target ES5 browsers for a while. But hopefully, in a few months, there'll be some story for running ES6 modules in the browser (see whatwg/html#443). I may be too optimistic here.