Apply Babel transforms (without polyfills) on Rollup builds

Transforms will be applied based on `.browserslistrc` supported browsers, with helper functions bundled if needed
alphagov · Jul 14, 2023 · d2c4e2e · d2c4e2e
1 parent 35f6f6a
commit d2c4e2e
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/govuk-frontend/babel.config.js b/packages/govuk-frontend/babel.config.js
@@ -0,0 +1,22 @@
+/**
+ * Babel config
+ *
+ * @type {import('@babel/core').ConfigFunction}
+ */
+module.exports = function (api) {
+  const browserslistEnv = !api.env('test')
+    ? 'javascripts'
+    : 'node'
+
+  return {
+    presets: [
+      ['@babel/preset-env', {
+        browserslistEnv,
+        loose: browserslistEnv === 'javascripts',
+
+        // Transform ES modules for Node.js
+        modules: browserslistEnv === 'node' ? 'auto' : false
+      }]
+    ]
+  }
+}
diff --git a/packages/govuk-frontend/package.json b/packages/govuk-frontend/package.json
@@ -53,6 +53,9 @@
     "dev": "gulp dev --color"
   },
   "devDependencies": {
+    "@babel/core": "^7.22.8",
+    "@babel/preset-env": "^7.22.7",
+    "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.3",
     "autoprefixer": "^10.4.14",

diff --git a/packages/govuk-frontend/rollup.publish.config.mjs b/packages/govuk-frontend/rollup.publish.config.mjs
@@ -1,3 +1,4 @@
+import { babel } from '@rollup/plugin-babel'
 import replace from '@rollup/plugin-replace'
 import { pkg } from 'govuk-frontend-config'
 import { componentPathToModuleName } from 'govuk-frontend-lib/names'
@@ -61,6 +62,9 @@ export default defineConfig(({ i: input }) => ({
 
       // Add GOV.UK Frontend release version
       development: pkg.version
+    }),
+    babel({
+      babelHelpers: 'bundled'
     })
   ]
 }))
diff --git a/packages/govuk-frontend/rollup.release.config.mjs b/packages/govuk-frontend/rollup.release.config.mjs
@@ -1,3 +1,4 @@
+import { babel } from '@rollup/plugin-babel'
 import replace from '@rollup/plugin-replace'
 import terser from '@rollup/plugin-terser'
 import * as GOVUKFrontend from 'govuk-frontend/src/govuk/all.mjs'
@@ -53,6 +54,9 @@ export default defineConfig(({ i: input }) => ({
 
       // Add GOV.UK Frontend release version
       development: pkg.version
+    }),
+    babel({
+      babelHelpers: 'bundled'
     })
   ]
 }))
diff --git a/packages/govuk-frontend/tasks/build/package.test.mjs b/packages/govuk-frontend/tasks/build/package.test.mjs
@@ -113,6 +113,7 @@ describe('packages/govuk-frontend/dist/', () => {
     // Check top level package contents
     expect(listingPackage).toEqual([
       'README.md',
+      'babel.config.js',
       'govuk-prototype-kit.config.json',
       'gulpfile.mjs',
       'package.json',