# \[solved\] PM build process
**URL:** https://discuss.prosemirror.net/t/solved-pm-build-process/1123
**Category:** Uncategorized
**Created:** [January 3, 2018, 12:01pm UTC](https://discuss.prosemirror.net/t/solved-pm-build-process/1123 "2018-01-03T12:01:25Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@rohusan](https://discuss.prosemirror.net/u/rohusan)
#### Post date: [January 3, 2018, 12:01pm UTC](https://discuss.prosemirror.net/t/solved-pm-build-process/1123/1 "2018-01-03T12:01:25Z")
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](https://jakearchibald.com/2017/es-modules-in-browsers/)).
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.
---
### Author:  [@marijn](https://discuss.prosemirror.net/u/marijn)
#### Post date: [January 3, 2018, 12:26pm UTC](https://discuss.prosemirror.net/t/solved-pm-build-process/1123/2 "2018-01-03T12:26:01Z")
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.
---
### Author:  [@rohusan](https://discuss.prosemirror.net/u/rohusan)
#### Post date: [January 3, 2018, 1:14pm UTC](https://discuss.prosemirror.net/t/solved-pm-build-process/1123/3 "2018-01-03T13:14:53Z")
> [@marijn](#):
>
> the compiled code is the recommended way to consume these modules
Do you mean dist/index.js with commonJS inside?
> [@marijn](#):
>
> 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.
Actually I start trying to understand the basics of pm. A good starting point seems to be your [examples](https://prosemirror.net/examples/). In the [basic example](https://prosemirror.net/examples/basic/) 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.
---
### Author:  [@marijn](https://discuss.prosemirror.net/u/marijn)
#### Post date: [January 3, 2018, 1:29pm UTC](https://discuss.prosemirror.net/t/solved-pm-build-process/1123/4 "2018-01-03T13:29:37Z")
> [@rohusan](#):
>
> What exactly is to be done to run the basic example (without nodejs as web server)?
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.
---
### Author:  [@rohusan](https://discuss.prosemirror.net/u/rohusan)
#### Post date: [January 3, 2018, 2:39pm UTC](https://discuss.prosemirror.net/t/solved-pm-build-process/1123/5 "2018-01-03T14:39:44Z")
> [@marijn](#):
>
> Rollup with the rollup-plugin-node-resolve and rollup-plugin-commonjs plugins works pretty well
# 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?
---
### Author:  [@rohusan](https://discuss.prosemirror.net/u/rohusan)
#### Post date: [January 3, 2018, 11:59pm UTC](https://discuss.prosemirror.net/t/solved-pm-build-process/1123/6 "2018-01-03T23:59:45Z")
I did succeed finally. To help others checkout [https://github.com/rohusan/pm-starter](https://github.com/rohusan/pm-starter).