chore(project): build pre-packaged distros with Rollup

* enables tree-shaking
* simplifies build
This commit is contained in:
Nico Rehwaldt 2018-04-02 23:15:15 +02:00
parent d3449ca87c
commit 3c895e08ae
8 changed files with 173 additions and 241 deletions

View File

@ -1,5 +1,5 @@
{
"extends": "plugin:bpmn-io/es5",
"extends": "plugin:bpmn-io/es6",
"env": {
"browser": true
}

View File

@ -12,3 +12,4 @@ test/*
.travis.yml
.wiredeps
CONTRIBUTING.md
rollup.config.js

View File

@ -37,19 +37,13 @@
"license": "SEE LICENSE IN LICENSE",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-preset-env": "^1.6.1",
"babelify": "^8.0.0",
"browser-pack-flat": "^3.0.8",
"browserify": "^14.5.0",
"browserify-derequire": "^0.9.1",
"bundle-collapser": "^1.1.1",
"chai": "^4.1.2",
"chai-match": "^1.1.1",
"common-shakeify": "^0.4.6",
"cpx": "^1.5.0",
"del": "^3.0.0",
"envify": "^4.1.0",
"eslint": "^4.19.0",
"eslint-plugin-bpmn-io": "^0.5.2",
"execa": "^0.8.0",
@ -71,11 +65,16 @@
"npm-run-all": "^4.1.2",
"phantomjs-prebuilt": "^2.1.12",
"puppeteer": "^0.13.0",
"rollup": "^0.57.1",
"rollup-plugin-commonjs": "^9.1.0",
"rollup-plugin-json": "^2.3.0",
"rollup-plugin-license": "^0.6.0",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-uglify": "^3.0.0",
"sinon": "^4.4.6",
"sinon-chai": "^2.14.0",
"stringify": "^5.2.0",
"uglify-es": "^3.3.10",
"unassertify": "^2.1.0",
"watchify": "^3.11.0"
},
"dependencies": {

View File

@ -1 +1 @@
/*! bpmn-js - {{ variant }} v{{ version }} | Copyright (c) 2014-present, camunda Services GmbH | bpmn.io/license */
/*! bpmn-js - {{ name }} v{{ version }} | Copyright (c) 2014-present, camunda Services GmbH | bpmn.io/license */

View File

@ -1,5 +1,5 @@
/*!
* bpmn-js - {{ variant }} v{{ version }}
* bpmn-js - {{ name }} v{{ version }}
*
* Copyright (c) 2014-present, camunda Services GmbH
*

140
rollup.config.js Normal file
View File

@ -0,0 +1,140 @@
import uglify from 'rollup-plugin-uglify';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import license from 'rollup-plugin-license';
import replace from 'rollup-plugin-replace';
import {
readFileSync
} from 'fs';
import pkg from './package.json';
const outputDir = 'dist';
const distros = [
{
input: 'Viewer',
output: 'bpmn-viewer'
},
{
input: 'NavigatedViewer',
output: 'bpmn-navigated-viewer'
},
{
input: 'Modeler',
output: 'bpmn-modeler'
}
];
const configs = distros.reduce(function(configs, distro) {
const {
input,
output
} = distro;
return [
...configs,
{
input: `./lib/${input}.js`,
output: {
name: 'BpmnJS',
file: `${outputDir}/${output}.development.js`,
format: 'umd'
},
plugins: pgl([
banner(output)
])
},
{
input: `./lib/${input}.js`,
output: {
name: 'BpmnJS',
file: `${outputDir}/${output}.production.min.js`,
format: 'umd'
},
plugins: pgl([
banner(output, true),
uglify({
output: {
comments: /license|@preserve/
}
})
])
}
];
}, []);
export default configs;
// helpers //////////////////////
function banner(bundleName, minified) {
const bannerName = (
minified
? 'banner-min'
: 'banner'
);
const bannerTemplate = readFileSync(`${__dirname}/resources/${bannerName}.txt`, 'utf8');
const banner = processTemplate(bannerTemplate, {
version: pkg.version,
date: today(),
name: bundleName
});
return license({
banner
});
}
function pgl(plugins=[]) {
return [
replace({
'process.env.NODE_ENV': JSON.stringify('production')
}),
nodeResolve({
module: true,
main: true,
browser: true
}),
commonjs(),
json(),
...plugins
];
}
function pad(n) {
if (n < 10) {
return '0' + n;
} else {
return n;
}
}
function today() {
const d = new Date();
return [
d.getFullYear(),
pad(d.getMonth() + 1),
pad(d.getDay())
].join('-');
}
function processTemplate(str, args) {
return str.replace(/\{\{\s*([^\s]+)\s*\}\}/g, function(_, n) {
var replacement = args[n];
if (!replacement) {
throw new Error('unknown template {{ ' + n + '}}');
}
return replacement;
});
}

View File

@ -1,10 +1,9 @@
'use strict';
var bundle = require('./bundle');
var path = require('path');
var mkdirp = require('mkdirp').sync,
var exec = require('execa').sync,
mkdirp = require('mkdirp').sync,
cp = require('cpx').copySync,
del = require('del').sync;
@ -29,13 +28,23 @@ cp(resolve('bpmn-font', '/dist/{font,css}/**'), dest + '/assets/bpmn-font');
console.log('copy diagram-js.css to ' + dest);
cp(resolve('diagram-js', '/assets/**'), dest + '/assets');
bundle(dest, {
'bpmn-viewer': 'lib/Viewer.js',
'bpmn-navigated-viewer': 'lib/NavigatedViewer.js',
'bpmn-modeler': 'lib/Modeler.js'
}, function(err) {
console.log('building pre-packaged distributions');
if (err) {
console.error('bundling failed', err);
var NODE_ENV = process.env.NODE_ENV;
[ 'production', 'development' ].forEach(function(env) {
try {
process.env.NODE_ENV = env;
exec('rollup', [ '-c' ]);
} catch (e) {
console.error('failed to build pre-package distributions', e);
process.exit(1);
}
process.env.NODE_ENV = NODE_ENV;
});
console.log('done.');

View File

@ -1,217 +0,0 @@
'use strict';
var bbl = require('babel-plugin-add-module-exports');
var browserify = require('browserify'),
derequire = require('browserify-derequire'),
collapse = require('bundle-collapser/plugin'),
fs = require('fs'),
path = require('path'),
flattenBundle = require('browser-pack-flat/plugin'),
commonShake = require('common-shakeify'),
unassertify = require('unassertify'),
uglify = require('uglify-es'),
envify = require('envify');
var pkg = require('../package');
var asyncSeries = require('./helpers').asyncSeries;
var BANNER = fs.readFileSync(__dirname + '/../resources/banner.txt', 'utf8'),
BANNER_MIN = fs.readFileSync(__dirname + '/../resources/banner-min.txt', 'utf8');
module.exports = function bundleAll(dest, targets, done) {
var fns = Object.keys(targets).map(function(k) {
var variant = k;
var entry = targets[k];
return function(done) {
console.log('\nbundle ' + variant);
bundle(dest, variant, entry, done);
};
});
asyncSeries(fns, done);
};
function Timer() {
this.reset();
}
Timer.prototype.done = function(message) {
console.log(message, '[' + (this.now() - this.s) + 'ms]');
this.reset();
};
Timer.prototype.reset = function() {
this.s = this.now();
};
Timer.prototype.start = function(msg) {
this.reset();
};
Timer.prototype.now = function() {
return new Date().getTime();
};
function processTemplate(str, args) {
return str.replace(/\{\{\s*([^\s]+)\s*\}\}/g, function(_, n) {
var replacement = args[n];
if (!replacement) {
throw new Error('unknown template {{ ' + n + '}}');
}
return replacement;
});
}
function pad(n) {
if (n < 10) {
return '0' + n;
} else {
return n;
}
}
function today() {
var d = new Date();
return [
d.getFullYear(),
pad(d.getMonth() + 1),
pad(d.getDay())
].join('-');
}
function bundle(dest, variant, entry, done) {
var src = path.resolve(entry);
var config = {
variant: variant,
version: pkg.version,
date: today()
};
var browserifyOptions = {
standalone: 'BpmnJS',
builtins: false,
insertGlobalVars: {
process: function() {
return 'undefined';
},
Buffer: function() {
return 'undefined';
}
}
};
var targetFileBase = path.join(dest, variant);
var banner = processTemplate(BANNER, config),
bannerMin = processTemplate(BANNER_MIN, config);
var timer = new Timer();
var fns = [
// production
function(done) {
timer.start('build prod');
browserify(browserifyOptions)
.transform('babelify', {
global: true,
babelrc: false,
presets: [ 'env' ],
plugins: [
bbl
]
})
.transform(envify, {
NODE_ENV: 'production'
})
.transform(unassertify)
.plugin(commonShake)
.plugin(flattenBundle)
.plugin(collapse)
.plugin(derequire)
.add(src)
.bundle(function(err, result) {
timer.done('bundled');
if (err) {
return done(err);
}
var str = result.toString('utf-8');
var minified = uglify.minify(str, {
compress: true,
mangle: true,
output: {
preamble: bannerMin
}
});
timer.done('minified');
fs.writeFileSync(targetFileBase + '.production.min.js', minified.code, 'utf8');
timer.done('wrote ' + targetFileBase + '.production.min.js');
done();
});
},
// development
function(done) {
timer.start('build dev');
browserify(browserifyOptions)
.transform('babelify', {
global: true,
babelrc: false,
presets: [ 'env' ],
plugins: [
bbl
]
})
.transform(envify, {
NODE_ENV: 'development'
})
.plugin(collapse)
.plugin(derequire)
.add(src)
.bundle(function(err, result) {
timer.done('bundled');
if (err) {
return done(err);
}
var code = banner + result.toString('utf-8');
fs.writeFileSync(targetFileBase + '.development.js', code, 'utf8');
timer.done('wrote ' + targetFileBase + '.development.js');
done();
});
}
];
asyncSeries(fns, done);
}