Allow externals

[Andarist]

I'd like to try this plugin out for building libraries with dependencies and those dependencies have to be kept as externals and not bundled into the final flat bundle.

At the moment I get

[!] (closure-compiler plugin) Error: Error transforming bundle with 'closure-compiler' plugin: Google Closure Compiler exit 2: java -jar /test_library/node_modules/google-closure-compiler/compiler.jar --language_out=NO_TRANSPILE --assume_function_wrapper=true --warning_level=QUIET --module_resolution=NODE --js=/private/var/folders/ws/tlwxqvs5407f21nxy7w8bgr80000gp/T/bde742fa-722d-49aa-8b2f-9578911127e3 --create_source_map=/private/var/folders/ws/tlwxqvs5407f21nxy7w8bgr80000gp/T/412e0f84-4bfa-4844-a5f5-b0727df34dd6

/private/var/folders/ws/tlwxqvs5407f21nxy7w8bgr80000gp/T/bde742fa-722d-49aa-8b2f-9578911127e3:1: ERROR - Failed to load module "react"
import React from 'react';
^

/private/var/folders/ws/tlwxqvs5407f21nxy7w8bgr80000gp/T/bde742fa-722d-49aa-8b2f-9578911127e3:2: ERROR - Failed to load module "prop-types"
import 'prop-types';
^

2 error(s), 0 warning(s)

[kristoferbaxter]

Have been thinking about how to accomplish this, and it appears doable with a caveat.

1. Provide an extern for the externals.
2. Strip the import statements from the source before Closure Compiler sees them.

The caveat is it requires an extern for the import (and its shape for the imported name), but ... we might be able to generate an extern that matches your exact usage given we can parse the AST for all input files and find how a module is used.

Details are here:

• Differentiate Internal/External Require Calls for Common JS Modules google/closure-compiler#954
• Add an Option To Prevent Rewriting Import/Require Statements for Specific Modules google/closure-compiler#1382

[kristoferbaxter]

Following this pattern I was able to get a small test pass to work for a React component.

Input

import React from 'react';

export class MyComponent extends React.Component {
  render() {
    return React.createElement("div", null, this.props.string);
  }
}

Configuration

  const bundle = await rollup.rollup({
      input: `test/esmodules/fixtures/${input}.js`,
      external: ['react', 'prop-types'],
      plugins: [compiler({
        externs: join('test/esmodules/fixtures/react.extern.js'),
      })],
    });

    return {
      minified: await readFile(join(`test/esmodules/fixtures/${input}.minified.js`), 'utf8'),
      code: (await bundle.generate({
        format,
        sourcemap: true,
      })).code,
    };

Output

class a extends React.Component{render(){return React.createElement("div",null,this.props.string)}}export {a as MyComponent};

[Andarist]

The caveat is it requires an extern for the import (and its shape for the imported name), but ... we might be able to generate an extern that matches your exact usage given we can parse the AST for all input files and find how a module is used.

This could work for many cases but once one pass the reference to imported stuff to i.e. a function call then we wouldn't be able to auto-detect it, right?

[kristoferbaxter]

Likely yes – not without going much more in-depth with the parsing and evaluation being done in the plugin.

[kristoferbaxter]

0.5.0 was released which supports the use-case. Let's open a new ticket if there are additional issues seen.