Intracto#172 added support for module bundling using Rollup

gijsroge · May 25, 2020 · 0dbf6fd · 0dbf6fd
1 parent fc2e829
commit 0dbf6fd
Show file tree

Hide file tree

Showing 8 changed files with 318 additions and 59 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -2,6 +2,8 @@
 
 const gulp = require('gulp');
 const configs = require('./lib/gulp/configs.js');
+const {generateBundle} = require('./lib/gulp/js.js');
+const glob = require('util').promisify(require('glob'));
 
 // Get all tasks
 const clean = require('./lib/gulp/clean.js');
@@ -30,15 +32,34 @@ async function watchFiles() {
         cssCompile({src: item.src, dest: item.dest});
       });
 
-      config.js.forEach(j => {
+      config.js.forEach(async j => {
         // Watch JS files, we name the function so that Gulp outputs the correct name
+        const files = await glob(j.src, {absolute: true});
+
+        let dependencyTree = await Promise.all(files.map(async src => {
+          const bundle = await generateBundle({src, cwd: j.cwd});
+          return bundle.watchFiles;
+        }));
+
+        dependencyTree = dependencyTree
+          .flat()
+          // https://github.com/jlmakes/karma-rollup-preprocessor/issues/30
+          .filter(dependency => !dependency.includes('\u0000'));
+
         // eslint-disable-next-line func-names
-        gulp.watch(j.watch, function js() {
-          return jsCompile({src: j.src, dest: j.dest, cwd: config.cwd, browserSync});
+        gulp.watch(dependencyTree, function js() {
+          return Promise.all(files.map(async file => {
+            return jsCompile({
+              src: file,
+              dest: j.dest,
+              cwd: config.cwd,
+              browserSync
+            });
+          }));
         });
 
         // Compile JS once at watch startup
-        jsCompile({src: j.src, dest: j.dest});
+        await Promise.all(files.map(async file => jsCompile({src: file, dest: j.dest, cwd: config.cwd, browserSync})));
       });
 
       config['js-concat'].forEach(js => {

diff --git a/lib/gulp/js.js b/lib/gulp/js.js
@@ -1,12 +1,14 @@
-const babel = require('gulp-babel');
-const terser = require('gulp-terser');
-const presetEnv = require('@babel/preset-env');
 const concat = require('gulp-concat');
 const gulp = require('gulp');
-const gulpIf = require('gulp-if');
 const {cosmiconfigSync} = require('cosmiconfig');
-const eslint = require('gulp-eslint');
 const plumber = require('gulp-plumber');
+const {babel} = require('@rollup/plugin-babel');
+const {eslint} = require('rollup-plugin-eslint');
+const {rollup} = require('rollup');
+const resolve = require('@rollup/plugin-node-resolve');
+const commonjs = require('@rollup/plugin-commonjs');
+const glob = require('util').promisify(require('glob'));
+const {terser} = require('rollup-plugin-terser');
 const configs = require('./configs.js');
 
 async function js() {
@@ -15,8 +17,9 @@ async function js() {
 
   const configurations = await configs.then(configurations => {
     configurations.forEach(config => {
-      jsTasks = jsTasks.concat(config.js.map(js => {
-        return jsCompile({src: js.src, dest: js.dest, cwd: config.cwd});
+      jsTasks = jsTasks.concat(config.js.map(async js => {
+        const files = await glob(js.src, {absolute: true});
+        return Promise.all(files.map(async file => jsCompile({src: file, dest: js.dest, cwd: config.cwd})));
       }));
     });
     return configurations;
@@ -33,67 +36,62 @@ async function js() {
   return Promise.all(jsConcatTasks);
 }
 
-function jsCompile({src, dest, cwd, browserSync = false}) {
-  return new Promise(
-    (async resolve => { // eslint-disable-line no-async-promise-executor
-      let stream = gulp
-        .src(src);
+async function generateBundle({src, cwd}) {
+  const rollupPlugins = [];
 
-      // Prevent errors from aborting task when files are being watched
-      if (process.argv.includes('watch')) {
-        stream = stream.pipe(plumber());
-      }
+  // Bundle third party imported modules
+  rollupPlugins.push(resolve.default());
 
-      // Enable linting if configured
-      const eslintConfig = cosmiconfigSync('eslint').search(cwd);
-      if (eslintConfig) {
-        stream = stream.pipe(eslint({
-          fix: process.argv.includes('--fix')
-        }))
-          .pipe(gulpIf(file => file.eslint !== null && file.eslint.fixed, gulp.dest(file => file._base)))
-          .pipe(eslint.format());
-      }
+  // Auto convert CommonJS modules to ES6, so they can be included in a Rollup bundle
+  rollupPlugins.push(commonjs());
 
-      stream = stream.pipe(babel({
-        presets: [presetEnv]
-      }));
+  // If user has an eslint configuration, load Eslint.
+  const hasEslintConfig = Boolean(cosmiconfigSync('eslint').search(cwd));
+  if (hasEslintConfig) {
+    rollupPlugins.push(eslint({fix: process.argv.includes('--fix')}));
+  }
 
-      if (process.env.NODE_ENV === 'production') {
-        stream = stream.pipe(terser());
-      }
+  // Decide whether to load a default babel preset if there is no babel configuration found
+  const hasBabelConfig = Boolean(cosmiconfigSync('babel').search(cwd));
+  const babelConfig = {babelHelpers: 'bundled'};
+  if (!hasBabelConfig) {
+    babelConfig.presets = ['@babel/preset-env'];
+  }
 
-      stream = stream.pipe(gulp.dest(dest));
+  rollupPlugins.push(babel(babelConfig));
 
-      if (browserSync !== false) {
-        stream.pipe(browserSync.stream({match: '**/*.js'}));
-      }
+  // Terser (minify)
+  rollupPlugins.push(terser());
 
-      stream.on('end', resolve);
-    })
-  );
+  return rollup({
+    input: src,
+    plugins: rollupPlugins
+  });
+}
+
+async function jsCompile({src, dest, cwd, browserSync = false}) {
+  const bundle = await generateBundle({src, cwd});
+
+  if (browserSync) {
+    browserSync.watch(bundle.watchFiles).on('change', browserSync.reload);
+  }
+
+  return bundle.write({
+    dir: dest,
+    format: 'cjs',
+    sourcemap: process.env.NODE_ENV !== 'production'
+  });
 }
 
 function jsConcat({src, dest, name, browserSync = false}) {
   return new Promise(
     (async resolve => { // eslint-disable-line no-async-promise-executor
       let stream = gulp.src(src);
 
-      // Prevent errors from aborting task when files are being watched
-      if (process.argv.includes('watch')) {
-        stream = stream.pipe(plumber());
-      }
-
-      stream = stream.pipe(plumber())
-        .pipe(babel({
-          presets: [presetEnv]
-        }))
-        .pipe(concat(name));
-
-      if (process.env.NODE_ENV === 'production') {
-        stream = stream.pipe(terser());
-      }
-
-      stream = stream.pipe(gulp.dest(dest));
+      stream = stream
+        .pipe(plumber())
+        .pipe(concat(name))
+        .pipe(gulp.dest(dest));
 
       if (browserSync !== false) {
         stream.pipe(browserSync.stream({match: '**/*.js'}));
@@ -104,4 +102,4 @@ function jsConcat({src, dest, name, browserSync = false}) {
   );
 }
 
-module.exports = {js, jsCompile, jsConcat};
+module.exports = {js, jsCompile, jsConcat, generateBundle};