build: configure Rollup to resolve or bundle node_modules

gulp/build-javascript.js

@@ -1,5 +1,3 @@
-const { readFileSync } = require('fs')
-
 const { glob } = require('glob')
 const gulp = require('gulp')
 
@@ -22,48 +20,101 @@ gulp.task('build:javascript', async () => {
     'moj/helpers.mjs',
     'moj/all.mjs'
   ]) {
-    await compileScripts(modulePath, {
-      srcPath: 'src',
-      destPath: 'package',
+    await Promise.all([
+      /**
+       * Rollup output for each module:
+       *
+       * - ECMAScript (ES) modules for Node.js or bundler `import`
+       *   (jQuery resolved via `node_modules`)
+       */
+      compileScripts(modulePath, {
+        srcPath: 'src',
+        destPath: 'package',
 
-      // Customise output
-      output: [
-        {
+        // Customise input
+        input: {
+          external: ['jquery', 'govuk-frontend']
+        },
+
+        // Customise output
+        output: {
           entryFileNames: '[name].mjs',
           preserveModules: true,
           preserveModulesRoot: 'src'
+        }
+      })(),
+
+      /**
+       * Rollup output for each module:
+       *
+       * - Universal Module Definition (UMD) bundle for browser <script>
+       *   (jQuery resolved via `window.$`)
+       */
+      compileScripts(modulePath, {
+        srcPath: 'src',
+        destPath: 'package',
+
+        // Customise input
+        input: {
+          external: ['jquery']
         },
-        {
+
+        // Customise output
+        output: {
           file: modulePath.replace('.mjs', '.js'),
+          globals: { jquery: '$' },
           format: 'umd',
           name: 'MOJFrontend'
         }
-      ]
-    })()
+      })()
+    ])
   }
 })
 
-gulp.task(
-  'build:javascript-minified',
-  compileScripts('all.mjs', {
-    srcPath: 'src/moj',
-    destPath: 'package/moj',
+gulp.task('build:javascript-minified', async () =>
+  Promise.all([
+    /**
+     * Rollup output (minified) without jQuery:
+     *
+     * - Universal Module Definition (UMD) bundle for browser <script>
+     *   (jQuery resolved via `window.$`)
+     */
+    compileScripts('all.mjs', {
+      srcPath: 'src/moj',
+      destPath: 'package/moj',
 
-    // Customise output
-    output: [
-      {
+      // Customise input
+      input: {
+        external: ['jquery']
+      },
+
+      // Customise output
+      output: {
         compact: true,
         file: 'moj-frontend.min.js',
+        globals: { jquery: '$' },
         format: 'umd',
         name: 'MOJFrontend'
-      },
-      {
-        banner: readFileSync('node_modules/jquery/dist/jquery.js', 'utf8'),
+      }
+    })(),
+
+    /**
+     * Rollup output (minified) with jQuery:
+     *
+     * - Universal Module Definition (UMD) bundle for browser <script>
+     *   (jQuery included in bundle)
+     */
+    compileScripts('all.mjs', {
+      srcPath: 'src/moj',
+      destPath: 'package/moj',
+
+      // Customise output
+      output: {
         compact: true,
         file: 'all.jquery.min.js',
         format: 'umd',
         name: 'MOJFrontend'
       }
-    ]
-  })
+    })()
+  ])
 )

gulp/tasks/scripts.js

@@ -2,66 +2,88 @@ const { join, parse } = require('path')
 
 const { babel } = require('@rollup/plugin-babel')
 const commonjs = require('@rollup/plugin-commonjs')
-const nodeResolve = require('@rollup/plugin-node-resolve')
+const { nodeResolve } = require('@rollup/plugin-node-resolve')
 const terser = require('@rollup/plugin-terser')
+const PluginError = require('plugin-error')
 const { rollup } = require('rollup')
-const externalGlobals = require('rollup-plugin-external-globals')
 
 /**
  * Compile Sass to CSS task
  *
  * @param {string} assetPath
  * @param {CompileScriptsOptions} entry
  */
-function compileScripts(assetPath, { srcPath, destPath, output = {} }) {
+function compileScripts(
+  assetPath,
+  {
+    srcPath,
+    destPath,
+    input = {}, // Rollup input options
+    output = {} // Rollup output options
+  }
+) {
   const { name } = parse(assetPath)
 
   const taskFn = async () => {
     const bundle = await rollup({
-      external: ['jquery'],
+      ...input,
       input: join(srcPath, assetPath),
       plugins: [
-        externalGlobals({
-          jquery: '$'
+        nodeResolve({
+          browser: true,
+          jail: output.preserveModules
+            ? srcPath // Prevent `node_modules` bundling
+            : undefined // Allow `node_modules` bundling
+        }),
+        commonjs({
+          requireReturnsDefault: 'preferred',
+          defaultIsModuleExports: true
         }),
-        nodeResolve(),
-        commonjs(),
         babel({
           babelHelpers: 'bundled'
         })
-      ]
+      ],
+
+      // Handle warnings as errors
+      onwarn(warning) {
+        throw new PluginError('compile:scripts', warning.message, {
+          name: warning.code ?? 'Error',
+          showProperties: false
+        })
+      }
     })
 
-    // Write to output formats
-    for (const options of [output].flat()) {
-      const file = join(destPath, options.file ?? `${name}.js`)
+    // Add minifier plugin (optional)
+    if (output.compact) {
+      output.plugins ??= []
+      output.plugins.push(
+        terser({
+          format: { comments: false },
+          sourceMap: { includeSources: true },
 
-      // Add minifier plugin (optional)
-      if (options.compact) {
-        options.plugins ??= []
-        options.plugins.push(
-          terser({
-            format: { comments: false },
-            sourceMap: { includeSources: true },
+          // Compatibility workarounds
+          safari10: true
+        })
+      )
+    }
 
-            // Compatibility workarounds
-            safari10: true
-          })
-        )
-      }
+    // Write to output format
+    await bundle.write({
+      extend: true,
+      format: 'esm',
+      ...output,
 
-      // Write to output format
-      await bundle.write({
-        extend: true,
-        format: 'esm',
-        ...options,
+      // Write to directory for modules
+      dir: output.preserveModules ? destPath : undefined,
 
-        // Output directory or file
-        dir: options.preserveModules ? destPath : undefined,
-        file: !options.preserveModules ? file : undefined,
-        sourcemap: true
-      })
-    }
+      // Write to file when bundling
+      file: !output.preserveModules
+        ? join(destPath, output.file ?? `${name}.js`)
+        : undefined,
+
+      // Enable source maps
+      sourcemap: true
+    })
   }
 
   taskFn.displayName = 'compile:scripts'
@@ -78,9 +100,10 @@ module.exports = {
  * @typedef {object} CompileScriptsOptions
  * @property {string} srcPath - Source directory
  * @property {string} destPath - Destination directory
- * @property {OutputOptions | OutputOptions[]} [output] - Output formats
+ * @property {InputOptions} [input] - Rollup input options
+ * @property {OutputOptions} [output] - Rollup output options
  */
 
 /**
- * @import { OutputOptions } from 'rollup'
+ * @import { InputOptions, OutputOptions } from 'rollup'
  */