Building ProseMirror

ProseMirror is another top-notch javascript library from Marijn Haverbeke, creator of CodeMirror and Eloquent Javascript author. Since ProseMirror is less mature than CodeMirror it currently doesn’t ship in a ‘built’ form, but instead as a mix-n-match set of modules (presumably as it matures it will be packaged differently). Since I’ve been out of the game a little bit with front-end development (or at least sticking with what I know) I wasn’t quite up with the tools I was going to need to compile ProseMirror. The dino demo was an excellent starting-point for what I wanted to do, but wouldn’t ‘build’ using browserify. I kept getting this error (which seemed to suggest browserify wasn’t liking the ES6 syntax used in the demo).

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

What to do to fix?

  1. npm install prosemirror –save (probably already done this, which is how you ended up in this mess in the first place)
  2. npm install –save-dev browserify
  3. npm install –save-dev babelify
  4. npm install –save-dev babel-preset-es2015
  5. Create .babelrc file
  6. browserify your-js-file.js -t babelify -o output.js

I’m sure ‘future-Joseph’ will thank me for my efforts documenting this, although by then ES6 will probably be ‘old hat’.