feat(building-rollup): support overriding built-in babel plugins

2026-03-10 08:31:19 +00:00 · 2020-04-23 22:36:03 +02:00
parent 098a923888
commit ecd294efad
7 changed files with 120 additions and 10 deletions
--- a/packages/building-rollup/README.md
+++ b/packages/building-rollup/README.md
@@ -165,7 +165,13 @@ const baseConfig = createSpaConfig({
 });
 ```

-## Customizing the babel config
+## Customizations
+
+Our config generator sets you up with good defaults for most projects. It's easy to extend and customize this config further for your requirements.
+
+If you find yourself disabling a lot of the default functionality we recommend forking from the default config and taking control yourself. Rollup is relatively easy to configure compared to other build tools, it's better to be in full control if you know what you're doing.
+
+### Customizing the babel config

 You can define custom babel plugins to be loaded by adding a `.babelrc` or `babel.config.js` to your project. See [babeljs config](https://babeljs.io/docs/en/configuration) for more information.

@@ -177,12 +183,6 @@ For example to add support for class properties:
 }
 ```

-## Customizations
-
-Our config generator sets you up with good defaults for most projects. It's easy to extend and customize this config further for your requirements.
-
-If you find yourself disabling a lot of the default functionality we recommend forking from the default config and taking control yourself. Rollup is relatively easy to configure compared to other build tools, it's better to be in full control if you know what you're doing.
-
 ### Customizing default plugins

 Our config creators install a number of rollup plugins by default:
@@ -282,7 +282,36 @@ const baseConfig = createSpaConfig({

 </details>

-### Extending the rollup config
+### Customize built-in babel plugins
+
+We add some babel plugins by default. These can be overwritten with a different configuration from the config. For example to change the html template minification, or add other modules to be minified:
+
+<details>
+  <summary>View example</summary>
+
+```js
+const baseConfig = createSpaConfig({
+  babel: {
+    plugins: [
+      [
+        require.resolve('babel-plugin-template-html-minifier'),
+        {
+          modules: {
+            'cool-html': ['html'],
+          },
+          htmlMinifier: {
+            removeComments: false,
+          },
+        },
+      ],
+    ],
+  },
+});
+```
+
+</details>
+
+## Extending the rollup config

 A rollup config is just a plain object. It's easy to extend it using javascript. We recommend using the `deepmerge` library because it is an easy way to merge objects and arrays:

--- a/packages/building-rollup/demo/modify-babel-plugin/demo-app.js
+++ b/packages/building-rollup/demo/modify-babel-plugin/demo-app.js
@@ -0,0 +1,12 @@
+import { LitElement, html } from 'lit-element';
+
+class DemoApp extends LitElement {
+  render() {
+    return html`
+      <!-- foo -->
+      <!-- bar -->
+    `;
+  }
+}
+
+customElements.define('demo-app', DemoApp);
--- a/packages/building-rollup/demo/modify-babel-plugin/index.html
+++ b/packages/building-rollup/demo/modify-babel-plugin/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta http-equiv="expires" content="0" />
+
+    <title>My Demo</title>
+  </head>
+
+  <body>
+    <demo-app></demo-app>
+    <script type="module" src="./demo-app.js"></script>
+  </body>
+</html>
--- a/packages/building-rollup/demo/modify-babel-plugin/rollup.config.js
+++ b/packages/building-rollup/demo/modify-babel-plugin/rollup.config.js
@@ -0,0 +1,28 @@
+const merge = require('deepmerge');
+const { createSpaConfig } = require('../../index.js');
+
+const baseConfig = createSpaConfig({
+  developmentMode: false,
+  injectServiceWorker: false,
+  legacyBuild: false,
+  babel: {
+    plugins: [
+      [
+        'babel-plugin-template-html-minifier',
+        {
+          modules: {
+            'lit-html': ['html'],
+            'lit-element': ['html', { name: 'css', encapsulation: 'style' }],
+          },
+          htmlMinifier: {
+            removeComments: false,
+          },
+        },
+      ],
+    ],
+  },
+});
+
+module.exports = merge(baseConfig, {
+  input: 'demo/modify-babel-plugin/index.html',
+});
--- a/packages/building-rollup/package.json
+++ b/packages/building-rollup/package.json
@@ -18,6 +18,7 @@
    "build:babelrc": "rimraf dist && rollup -c demo/babelrc/rollup.config.js",
    "build:basic": "rimraf dist && rollup -c demo/js/rollup.basic.config.js",
    "build:cjs": "rimraf dist && rollup -c demo/cjs/rollup.spa.config.js",
+    "build:modify-babel-plugin": "rimraf dist && rollup -c demo/modify-babel-plugin/rollup.config.js",
    "build:spa": "rimraf dist && rollup -c demo/js/rollup.spa.config.js",
    "build:spa-js-input": "rimraf dist && rollup -c demo/js/rollup.spa-js-input.config.js",
    "build:spa-nomodule": "rimraf dist && rollup -c demo/js/rollup.spa-nomodule.config.js",
@@ -27,6 +28,7 @@
    "start:build": "es-dev-server --root-dir dist --compatibility none --open",
    "start:cjs": "npm run build:cjs && npm run start:build",
    "start:demo": "es-dev-server --app-index demo/js/index.html --open --compatibility none",
+    "start:modify-babel-plugin": "npm run build:modify-babel-plugin && npm run start:build",
    "start:spa": "npm run build:spa && npm run start:build",
    "start:spa-js-input": "npm run build:spa-js-input && npm run start:build",
    "start:spa-nomodule": "npm run build:spa-nomodule && npm run start:build",
--- a/packages/building-rollup/src/createBasicConfig.js
+++ b/packages/building-rollup/src/createBasicConfig.js
@@ -12,7 +12,7 @@ const {
  babelConfigSystemJs,
 } = require('./babel/babel-configs');
 const { bundledBabelHelpers } = require('./babel/rollup-plugin-bundled-babel-helpers');
-const { isFalsy, pluginWithOptions } = require('./utils');
+const { isFalsy, pluginWithOptions, dedupedBabelPlugin } = require('./utils');

 /**
 * @param {BasicOptions} userOptions
@@ -57,7 +57,8 @@ function createBasicConfig(userOptions = {}) {
      }),

      // build non-standard syntax to standard syntax and other babel optimization plugins
-      pluginWithOptions(babel, opts.babel, createBabelConfigRollupBuild(developmentMode)),
+      // user plugins are deduped to allow overriding
+      dedupedBabelPlugin(babel, opts.babel, createBabelConfigRollupBuild(developmentMode)),

      // minify js code
      !developmentMode && pluginWithOptions(terser, opts.terser, { output: { comments: false } }),
--- a/packages/building-rollup/src/utils.js
+++ b/packages/building-rollup/src/utils.js
@@ -6,6 +6,28 @@ const Terser = require('terser');

 const isFalsy = _ => !!_;

+function dedupedBabelPlugin(babel, userConfig, defaultConfig) {
+  if (!userConfig) {
+    return undefined;
+  }
+
+  const config = merge(defaultConfig, typeof userConfig === 'object' ? userConfig : {});
+
+  const newPlugins = [];
+  const addedPlugins = new Set();
+  for (const plugin of [...config.plugins].reverse()) {
+    const name = Array.isArray(plugin) ? plugin[0] : plugin;
+    const resolvedName = require.resolve(name);
+    if (!addedPlugins.has(resolvedName)) {
+      addedPlugins.add(resolvedName);
+      newPlugins.unshift(plugin);
+    }
+  }
+
+  config.plugins = newPlugins;
+  return babel(config);
+}
+
 function pluginWithOptions(plugin, userConfig, defaultConfig, ...otherParams) {
  if (!userConfig) {
    return undefined;
@@ -47,5 +69,6 @@ function applyServiceWorkerRegistration(htmlString) {
 module.exports = {
  isFalsy,
  pluginWithOptions,
+  dedupedBabelPlugin,
  applyServiceWorkerRegistration,
 };