Gracefully handle external modules in iife format

[hyf0]

No description provided.

[hyf0]

After #1622, there will be no panic if the input contains external modules while targeting iife format. But external imports are just striped away, which makes the output still not runnable. See #1624.

[hyf0]

@underfin Please describe how you gonna solve this issue before submitting an PR. I prefer how esbuild handle this, but the rollup's solution does show some advantages.

[hyf0]

How about we just keep generating imports from external modules

import ext from 'ext'
import { a } from 'ext'
console.log(ext, a, require('ext'))

become

import ext from 'ext'
import { a } from 'ext'

(function() {
  console.log(ext, a, require('ext'))
})()

Still follows the shits in, shits out principle.

---

esbuild's output

https://hyrious.me/esbuild-repl/?version=0.23.0&b=e%00entry.js%00import+ext+from+%27ext%27%0Aimport+%7B+a+%7D+from+%27ext%27%0Aconsole.log%28ext%2C+a%2C+require%28%27ext%27%29%29&o=--bundle+--format%3Diife+--external%3Aext+--outdir%3Ddist

(() => {
  var __create = Object.create;
  var __defProp = Object.defineProperty;
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  var __getOwnPropNames = Object.getOwnPropertyNames;
  var __getProtoOf = Object.getPrototypeOf;
  var __hasOwnProp = Object.prototype.hasOwnProperty;
  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
    get: (a2, b) => (typeof require !== "undefined" ? require : a2)[b]
  }) : x)(function(x) {
    if (typeof require !== "undefined") return require.apply(this, arguments);
    throw Error('Dynamic require of "' + x + '" is not supported');
  });
  var __copyProps = (to, from, except, desc) => {
    if (from && typeof from === "object" || typeof from === "function") {
      for (let key of __getOwnPropNames(from))
        if (!__hasOwnProp.call(to, key) && key !== except)
          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
    }
    return to;
  };
  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
    // If the importer is in node compatibility mode or this is not an ESM
    // file that has been converted to a CommonJS file using a Babel-
    // compatible transform (i.e. "__esModule" has not been set), then set
    // "default" to the CommonJS "module.exports" for node compatibility.
    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
    mod
  ));

  // entry.js
  var import_ext = __toESM(__require("ext"));
  var import_ext2 = __require("ext");
  console.log(import_ext.default, import_ext2.a, __require("ext"));
})();

---

rollup's output

https://rollupjs.org/repl/?version=4.18.1&shareable=JTdCJTIyZXhhbXBsZSUyMiUzQW51bGwlMkMlMjJtb2R1bGVzJTIyJTNBJTVCJTdCJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMGV4dCUyMGZyb20lMjAnZXh0JyU1Q25pbXBvcnQlMjAlN0IlMjBhJTIwJTdEJTIwZnJvbSUyMCdleHQnJTVDbmNvbnNvbGUubG9nKGV4dCUyQyUyMGElMkMlMjByZXF1aXJlKCdleHQnKSklMjIlMkMlMjJpc0VudHJ5JTIyJTNBdHJ1ZSUyQyUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTdEJTVEJTJDJTIyb3B0aW9ucyUyMiUzQSU3QiUyMm91dHB1dCUyMiUzQSU3QiUyMmZvcm1hdCUyMiUzQSUyMmlpZmUlMjIlMkMlMjJnbG9iYWxzJTIyJTNBJTdCJTdEJTdEJTJDJTIydHJlZXNoYWtlJTIyJTNBdHJ1ZSU3RCU3RA==

(function (ext) {
	'use strict';

	console.log(ext, ext.a, require('ext'));

})(ext);

[underfin]

I would like using rollup way, it give a escape route for external module. Because the complete code of iife format should be like this.

var Module = (function(exports) {
    console.log(ext, ext.a, require('ext'));
    exports.value =1;
    return exports
})({}, ext)

The ext also could be configure by output.globals.

I'm try port it from here.

[hyf0]

Because the complete code of iife format should be like this.

Are you proposing

import ext from 'ext'
import { a } from 'ext'
console.log(ext, a, require('ext'))

should be transformed to ?

var Module = (function(exports) {
    console.log(ext, ext.a, require('ext'));
    exports.value =1;
    return exports
})({}, ext)

[underfin]

The original module should be

import ext from 'ext'
import { a } from 'ext'
console.log(ext, a, require('ext'))
export const value = 1;

[hyf0]

I do see the advantages of rollup's implementation. But I wonder the the real-world usage of exports and Module on case

var Module = (function(exports) {
    console.log(ext, ext.a, require('ext'));
    exports.value =1;
    return exports
})({}, ext)

Would be better if we some find some real-world use cases on iife output. I want to provide a most dx-friendly way to handle/inject external modules. Using global variables seems dirty in the fist glance.

[hyf0]

Some references:

• How to return value from an iife bundle? evanw/esbuild#2277 (comment)
• Option to assign default export to globalName for iife format evanw/esbuild#3740
• When using iife format, the module and exports variables conflict with the code of other compilation tools. evanw/esbuild#3562

[yyx990803]

We should follow what Rollup does in this case.

[7086cmd]

In Rollup, the parameters of the wrapper function vary depending on the situation, such as when we specify the output.exports option. If we specify the export value as named, it requires a parameter named exports, which is the return value after modification in an IIFE. External modules are also treated as parameters.

This is particularly relevant to the output.globals option, which specifies the global variable names for external modules in the browser. For example, when using electron, Rollup generates the following warning:

(!) Missing global variable names
https://rollupjs.org/configuration-options/#output-globals
Use "output.globals" to specify browser global variable names corresponding to external modules:
electron (guessing "electron")
electron (guessing "electron")

To elegantly support IIFE with output.exports, it is necessary to address this issue by ensuring the parameters are consistently specified.

[7086cmd]

According to the conversation and Rollup's behavior, I handled the iife external modules and the output.globals in #1694.

[underfin]

#1694 (comment) need to do

[7086cmd]

Is there a specific action we need to take in response to right now?