Run rollup once, to generate both cjs and es-modules bundles

Previously we ran rollup for twice, but as the only thing that differs
is the output format that's not needed.

This reduces the build time by ~5.5 seconds (~15%)
This commit is contained in:
Ben Scott
2019-01-21 15:27:13 -08:00
parent 36958d8d6b
commit 1811ebebb4
3 changed files with 18 additions and 62 deletions

View File

@@ -1,5 +1,4 @@
const {resolve} = require('path');
const {readJSONSync} = require('fs-extra');
const nodeResolve = require('rollup-plugin-node-resolve');
const babel = require('rollup-plugin-babel');
const json = require('rollup-plugin-json');
@@ -12,7 +11,6 @@ const image = require('./plugins/image');
const icon = require('./plugins/icon');
const getNamespacedClassName = require('./namespaced-classname');
const createExistingClassnameTokenUser = require('./use-existing-classname-tokens');
const project = resolve(__dirname, '../..');
const buildRoot = resolve(project, './build-intermediate');
@@ -27,21 +25,7 @@ const sassResources = [
resolve(styleRoot, './shared.scss'),
];
module.exports = function createRollupConfig({
entry,
writeCSS,
cssPath,
useExistingClassTokens = false,
}) {
let generateScopedName;
if (useExistingClassTokens) {
generateScopedName = createExistingClassnameTokenUser(
readJSONSync(`${cssPath.slice(0, -4)}.tokens.json`),
);
} else {
generateScopedName = getNamespacedClassName;
}
module.exports = function createRollupConfig({entry, cssPath}) {
return {
input: entry,
external(id) {
@@ -69,10 +53,10 @@ module.exports = function createRollupConfig({
}),
commonjs(),
styles({
output: writeCSS && cssPath,
output: cssPath,
includePaths: [styleRoot],
includeAlways: sassResources,
generateScopedName,
generateScopedName: getNamespacedClassName,
}),
icon({
include: '**/icons/*.svg',

View File

@@ -1,5 +0,0 @@
module.exports = function createExistingClassnameTokensUser(tokens) {
return function useExistingClassnameTokens(localName, filePath) {
return tokens[filePath][localName];
};
};

View File

@@ -85,27 +85,9 @@ copy(['./src/**/*.{scss,svg,png,jpg,jpeg,json}', intermediateBuild], {up: 1})
`,
);
})
// Main bundle: supports all our supported browsers, CommonJS, and
// Main CJS and ES modules bundles: supports all our supported browsers and
// uses the full class names for any Sass imports
.then(() =>
runRollup({
entry: mainEntry,
output: 'polaris.js',
format: 'cjs',
css: true,
}),
)
// ES bundle: supports all our supported browsers, but uses ES imports
// (for tree shaking), uses the full class names for any Sass imports
.then(() =>
runRollup({
entry: mainEntry,
output: 'polaris.es.js',
format: 'es',
css: false,
useExistingClassTokens: true,
}),
)
.then(() => runRollup())
.then(() =>
Promise.all([
cp('build/polaris.js', './index.js'),
@@ -123,28 +105,23 @@ copy(['./src/**/*.{scss,svg,png,jpg,jpeg,json}', intermediateBuild], {up: 1})
process.exit(1);
});
function runRollup({
entry,
output,
format,
css,
outputDir = build,
minifyClassnames = false,
useExistingClassTokens = false,
}) {
function runRollup() {
const config = createRollupConfig({
entry,
minifyClassnames,
useExistingClassTokens,
writeCSS: css,
cssPath: resolvePath(outputDir, 'polaris.css'),
entry: mainEntry,
cssPath: resolvePath(build, 'polaris.css'),
});
return rollup(config).then((bundle) =>
bundle.write({
format,
file: resolvePath(outputDir, output),
}),
Promise.all([
bundle.write({
format: 'cjs',
file: resolvePath(build, 'polaris.js'),
}),
bundle.write({
format: 'esm',
file: resolvePath(build, 'polaris.es.js'),
}),
]),
);
}