Bundling

[oskarwrobel]

We need to bundle whole editor files into two files: ckeditor.js and ckeditor.css. For JS bundling we decided to use Rollup with tree-shaking option (inlcludes only uses library code instead of whole library). CSS file is already bundled (builded theme has only one CSS file), but we still need to minify it.

It seems to be pretty easy, but:

• At this moment we don't know a list of every dependency needed in the bundle. It is because editor features load automatically during initialization process. To work around this problem @Reinmar idea was to create custom entry file with necessary imports and wrapped CKEDITOR.create function. Something like that:

import CKEDITOR from 'yyy.js';
import FeatuerA from 'xxx.js';

export default function createEditor( element, config ) {
    return CKEDITOR.create( element, Object.assign( config, { features: [ FeatureA ] } ) );
}

• There is no (or I couldn't find) JS minifier fully supporting esnext syntax. Harmony branch of UglifyJS seems to be closest to reach this goal, but still needs to convert some of code to ES5 before minification.

[Reinmar]

There is no (or I couldn't find) JS minifier fully supporting esnext syntax. Harmony branch of UglifyJS seems to be closest to reach this goal, but still needs to convert some of code to ES5 before minification.

That's a sad bit. I've heard that there's no ES6 minifier yet. Can you tell which ES6 features need to be converted to ES5 before getting minified?

[Reinmar]

As for the entry point for Rollup, we're now working on getting rid of CKEDITOR. See #178 (comment) for more details on what will be the new entry point.

[oskarwrobel]

We decided to fully transpile code by babel to make it more cross browser. Thanks to this we don’t have a problem with JS minificators/manglers which not fully supports ES6 syntax.

[oskarwrobel]

It is worth leaving a note about problem I had with babel. I think that babel documentation is not clear in this subject.

So...

We use generators so we had to do something more than only transpile code with es2015 presets.

In order to use Generators you must include the Babel polyfill.

And it works fine. If we transpile code with es2015 presets and inject babel polyfill it works like we expect. But we shouldn't use babel-polyfill because it modifies global scope. Thankfully babel had solution for that case.

If you are looking for something that won't modify globals to be used in a tool/library, checkout the transform-runtime plugin.

And here is a problem. Babel with transform-runtime transpiles code but doesn't inject code of transform-runtime helpers. It injects require() statement with necessary helpers instead.

In most cases, you should install babel-plugin-transform-runtime as a development dependency (with --save-dev) and babel-runtime as a production dependency (with --save).

The transformation plugin is typically used only in development, but the runtime itself will be depended on by your deployed/published code.

Looks like runtime helpers should be loaded by application, but we don't want it. We need to create independent bundle.

But we are using rollup and babel plugin for rollup, so we can try to force rollap to include those helpers. To do it we need two other plugins rollup-plugin-commonjs and rollup-plugin-node-resolve. With those plugins, rollap includes missing helpers but... in wrong order 😞 .

Finally I figured out pretty simple (maybe not perfectly elegant) solution. I didn't use transform-runtime plugin at all, I only used es2015-rollup presets and I manually included regenerator-runtime to our source code - https://github.com/ckeditor/ckeditor5/pull/193/files#diff-5392e8a5c2208af620b6fc87880ad21aR21.

[Reinmar]

Thanks for the summary! May turn to be really helpful.

[Reinmar]

It looks like we'll want to extract this task to a separate package (see #215). Which actually makes perfect sense considering that we'll have many bundlers for many environments. This one would be ckeditor5-dev-bundler-rollup.