Compile ES modules using Rollup

alphagov · Mar 30, 2023 · f4326b9 · f4326b9
1 parent 69b3f08
commit f4326b9
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 16 deletions.
diff --git a/tasks/build/package.mjs b/tasks/build/package.mjs
@@ -56,9 +56,9 @@ export default gulp.series(
     })
   ),
 
-  // Copy GOV.UK Frontend JavaScript (ES modules)
-  task.name('copy:mjs', () =>
-    files.copy('**/!(*.test).mjs', {
+  // Compile GOV.UK Frontend JavaScript (ES modules)
+  task.name('compile:mjs', () =>
+    scripts.compile('!(*.test).mjs', {
       srcPath: join(paths.src, 'govuk'),
       destPath: join(paths.package, 'govuk-esm')
     })

diff --git a/tasks/build/package.test.mjs b/tasks/build/package.test.mjs
@@ -57,9 +57,14 @@ describe('package/', () => {
           join(requirePath, `${name}.js.map`) // with source map
         ]
 
-        // Only source `./govuk/**/*.mjs` files copied to `./govuk-esm/**/*.mjs`
+        // Only source `./govuk/**/*.mjs` files compiled to `./govuk-esm/**/*.mjs`
         if (importFilter.test(requirePath)) {
-          output.push(join(requirePath.replace(importFilter, 'govuk-esm'), `${name}.mjs`))
+          const importPath = requirePath.replace(importFilter, 'govuk-esm')
+
+          output.push(...[
+            join(importPath, `${name}.mjs`),
+            join(importPath, `${name}.mjs.map`) // with source map
+          ])
         }
 
         return output

diff --git a/tasks/scripts.mjs b/tasks/scripts.mjs
@@ -38,28 +38,38 @@ export async function compileJavaScript ([modulePath, { srcPath, destPath, fileP
   const moduleSrcPath = join(srcPath, modulePath)
   const moduleDestPath = join(destPath, filePath ? filePath(parse(modulePath)) : modulePath)
 
+  // Rollup output format
+  const format = moduleDestPath.endsWith('.mjs')
+    ? 'es'
+    : 'umd'
+
   // Create Rollup bundle
   const bundle = await rollup({
-    input: moduleSrcPath
+    input: moduleSrcPath,
+
+    // Preserve JavaScript ESM import statements
+    experimentalPreserveModules: format === 'es'
   })
 
-  // Compile JavaScript ESM to CommonJS
+  // Compile JavaScript to output format
   const bundled = await bundle[moduleDestPath.endsWith('.min.js') ? 'generate' : 'write']({
-    file: moduleDestPath,
-    sourcemapFile: moduleDestPath,
+    dir: destPath,
+    format,
     sourcemap: true,
 
     // Universal Module Definition (UMD)
     // for browser + Node.js compatibility
-    format: 'umd',
+    ...format === 'umd' && {
+      file: moduleDestPath,
 
-    // Legacy mode is required for IE8 support
-    legacy: true,
+      // Legacy mode is required for IE8 support
+      legacy: true,
 
-    // Used to set the `window` global for 'iife' and 'umd' bundles
-    // Components are given unique names (e.g GOVUKFrontend.Accordion)
-    amd: { id: componentPathToModuleName(modulePath) },
-    name: componentPathToModuleName(modulePath)
+      // Used to set the `window` global for 'iife' and 'umd' bundles
+      // Components are given unique names (e.g GOVUKFrontend.Accordion)
+      amd: { id: componentPathToModuleName(modulePath) },
+      name: componentPathToModuleName(modulePath)
+    }
   })
 
   // Minify bundle