Importing npm modules to the web as JavaScript modules

He estado trabajando en una forma de facilitar el envío de contenido a mi sitio estático y ha sido un pequeño ejercicio divertido que compartiré más en otra publicación. En esta publicación, quiero compartir la configuración rollup que utilicé para importar casi cualquier módulo npm en un proyecto frontend utilizando módulos de JavaScript.

Necesitaba una forma rápida de importar un módulo simple get-urls en mi proyecto. El módulo está bien probado y hace lo que necesitaba ... ignore el hecho de que es bastante fácil de implementar en un par de líneas de JavaScript. El problema que tuve es que mi proyecto está construido en ES6, usa módulos y no quería tener que agruparme usando CommonJS (require).

No pude encontrar mucha orientación sobre qué hacer aquí, así que fui al experimento y esta solución es la solución que encontré:

  1. Cree un archivo que importe el módulo npm que necesitaba. module.exports = require ('get-urls'); Este módulo será lo que se convierta en estilo ES6. 2. Cree una configuración de rollup que 1. Importe los nodos globales y los builtins. 1. Resuelve todos los módulos npm necesarios para mi uso de este módulo. 1. Pase los resultados a través del complemento commonjs para que ahora esté en formato de módulo de JavaScript. 1. Comprima la salida, porque es enorme: \ 3. Incluya el archivo incluido en su proyecto y alégrese.
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';
import closure from 'rollup-plugin-closure-compiler-js';

export default {
  input: 'static/javascripts/get-urls.js',
  output: {
      file: 'static/javascripts/get-urls.bundle.mjs',
      format: 'es',
      browser: true
    },
  plugins: [
    globals(),
    builtins(),
    resolve({
      preferBuiltins: false,
      browser: true,
      // pass custom options to the resolve plugin
      customResolveOptions: {
        moduleDirectory: 'node_modules'
      }
    }),
    commonjs(),
    closure({
      compilationLevel: 'WHITESPACE',
      languageIn: 'ES6',
      languageOut: 'ES6'
    })
  ]
};

Creo que hay formas mejores que esta, la salida para lo que es una función relativamente simple es enorme (70kb), pero ahora significa que puedo usar módulos de npm directamente en mi página.

<script type="module">
    import getUrls from '/javascripts/get-urls.bundle.mjs';
    ...

Ordenado...

About Me: Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.