[solved] PM build process

1

First I was searching for a way without build process as FF understands ES6 including module import (about:config, dom.moduleScripts.enabled true). Unfortunately “Bare import” fails (see here).

Next I was trying pm’s build process:

git clone https://github.com/ProseMirror/prosemirror-example-setup.git
cd prosemirror-example-setup/
npm install
npm run-script build

The resulting dist/index.js uses commonJs which is not understood by browser.

Next I changed from cjs to iief:

> vi rollup.config.js

**before**
module.exports = {
  input: "./src/index.js",
  output: {format: "cjs", file: "dist/index.js"},
  sourcemap: true,
  plugins: [require("rollup-plugin-buble")()],
  external(id) { return !/^[\.\/]/.test(id) }
}
**after**
module.exports = {
  input: "./src/index.js",
  output: {format: "iife", file: "dist/index.js"},
  sourcemap: true,
  name: 'pm',
  plugins: [require("rollup-plugin-buble")()],
  external(id) { return !/^[\.\/]/.test(id) }
}

npm run build

./src/index.js → dist/index.js...
(!) Missing global variable names
Use options.globals to specify browser global variable names corresponding to external modules
prosemirror-keymap (guessing 'prosemirrorKeymap')
prosemirror-history (guessing 'prosemirrorHistory')
prosemirror-commands (guessing 'prosemirrorCommands')
prosemirror-state (guessing 'prosemirrorState')
prosemirror-dropcursor (guessing 'prosemirrorDropcursor')
prosemirror-gapcursor (guessing 'prosemirrorGapcursor')
prosemirror-menu (guessing 'prosemirrorMenu')
prosemirror-schema-list (guessing 'prosemirrorSchemaList')
prosemirror-inputrules (guessing 'prosemirrorInputrules')
created dist/index.js in 620ms

Did anybody succeed with rollup iief? The whole build process is confusing. Any help is appreciated, thanks.

2

Packaging just the example-setup module won’t give you a full editor — that’s just a glue module that pulls in and sets up some plugins.

You could run rollup directly on the ES6 source files, but you’ll have to provide it with a bunch of configuration to make it ignore the dependency modules’ main files and use the sources in src/ instead. This is going to be awkward and isn’t something that I explicitly support—the compiled code is the recommended way to consume these modules.

Browser support for ES modules doesn’t come with any kind of intelligent resolution at the moment (it expects imported names to be relative URLs only), so directly loading a multi-module system like this in that way isn’t possible.

3

Do you mean dist/index.js with commonJS inside?

Actually I start trying to understand the basics of pm. A good starting point seems to be your examples. In the basic example you mention prosemirror-example-setup but some pieces are missing for me to understand how to start.

What exactly is to be done to run the basic example (without nodejs as web server)?

Thanks so far for your first (fast) answer.

4

Run a bundler on the CommonJS code. Rollup with the rollup-plugin-node-resolve and rollup-plugin-commonjs plugins works pretty well. Browserify and Webpack should also do fine.

5

New approach

Pull in and set up some plugins

git clone https://github.com/ProseMirror/prosemirror-example-setup.git
cd prosemirror-example-setup/
npm install

Save example code

 vi src/basic-example.js
 copy js code from basic example

Install rollup plugins

npm install --save-dev rollup-plugin-node-resolve
npm install --save-dev rollup-plugin-commonjs

Append npm run script for basic example

vi package.json

  "scripts": {
    ...
    "build-basic": "rollup -c rollup.basic.config.js",

New rollup configuration file

vi rollup.basic.config.js

import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  input: './src/basic-example.js',
  output: {
    file: 'dist/basic-example.js',
    format: 'iife'
  },
  name: 'pm',
  sourcemap: true,
  external(id) { return !/^[\.\/]/.test(id) },
  plugins: [
    require("rollup-plugin-buble")(),
    nodeResolve({
      jsnext: true,
      main: true
    }),
    commonjs()
  ]
};

run build process

npm run build-basic

> prosemirror-example-setup@1.0.1 build-basic /tests/prosemirror-example-setup
> rollup -c rollup.basic.config.js


./src/basic-example.js → dist/basic-example.js...
(!) Missing global variable names
Use options.globals to specify browser global variable names corresponding to external modules
prosemirror-state (guessing 'prosemirrorState')
prosemirror-view (guessing 'prosemirrorView')
prosemirror-model (guessing 'prosemirrorModel')
prosemirror-schema-basic (guessing 'prosemirrorSchemaBasic')
prosemirror-schema-list (guessing 'prosemirrorSchemaList')
prosemirror-example-setup (guessing 'prosemirrorExampleSetup')
created dist/basic-example.js in 96ms

Not easy, still after reading a lot about bundler and es6. What is the right way to bundle it? Is there an example somewhere?

6

I did succeed finally. To help others checkout https://github.com/rohusan/pm-starter.

1 Like