Babel how to process external package

Viewed 241

I have a project using TS and Babel via Rollup, this project uses external package and I have a problem - output code contains arrow functions from this external library and it won't work in my target environment (IE 11).

How can I process external library with babel?

rollup.config.js:

import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import { terser } from "rollup-plugin-terser";
import commonjs from "@rollup/plugin-commonjs";
import replace from "@rollup/plugin-replace";
import serve from "rollup-plugin-serve";

const extensions = [".js", ".ts"];

const prod = process.env.NODE_ENV == "production";

const browserPlugins = [
  terser({
    output: {
      comments: false,
    },
  }),
];


const rollupPlugins = [
  resolve({ extensions }),
  commonjs(),
  babel({
    babelHelpers: "bundled",
    include: ["src/**/*.ts"],
    extensions,
  }),
];

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export default async () => {
  if (process.env.NODE_ENV == "serve") {
    rollupPlugins.push(serve("dist/bundles"));
  }

  return {
    input: "src/initializer/main.ts",
    output: [
      {
        file: "dist/bundles/main.unminified.js",
        format: "iife",
        name: "cp",
        extend: true,
      },
      {
        file: "dist/bundles/main.js",
        format: "iife",
        name: "cp",
        plugins: browserPlugins,
        extend: true,
        sourcemap: true,
      },
    ],
    plugins: rollupPlugins,
  };
};

If I adds external library to babel include list, I get a bunch of errors

include: ["src/**/*.ts", "node_modules/penpal/**/*.js"],

outputs:

    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/child/connectToParent.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/parent/connectToChild.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/parent/connectToChild.js (101:8)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/createDestructor.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/createDestructor.js (28:8)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/methodSerialization.js (4:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/startConnectionTimeout.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/startConnectionTimeout.js (33:8)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/createLogger.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/createLogger.js (24:8)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/child/handleSynAckMessageFactory.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/child/handleSynAckMessageFactory.js (58:8)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/parent/getOriginFromSrc.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/parent/getOriginFromSrc.js (61:8)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/parent/handleAckMessageFactory.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/parent/handleAckMessageFactory.js (68:8)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/parent/handleSynMessageFactory.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/parent/handleSynMessageFactory.js (32:8)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/parent/monitorIframeRemoval.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/parent/monitorIframeRemoval.js (36:8)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/parent/validateIframeHasSrcOrSrcDoc.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/parent/validateIframeHasSrcOrSrcDoc.js (14:8)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/connectCallReceiver.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/connectCallReceiver.js (115:8)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/connectCallSender.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/connectCallSender.js (136:8)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/errorSerialization.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/generateId.js (3:12)
    (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
    node_modules/penpal/lib/generateId.js (14:8)
    (!) `this` has been rewritten to `undefined`
    https://rollupjs.org/guide/en/#error-this-is-undefined
    node_modules/penpal/lib/child/connectToParent.js
    1: import { newArrowCheck as _newArrowCheck } from "\0rollupPluginBabelHelpers.js";
    2: 
    3: var _this = this;
                   ^
    4: 
    5: import "core-js/modules/es.regexp.constructor.js";
    ...and 1 other occurrence
    node_modules/penpal/lib/parent/connectToChild.js
    1: import { newArrowCheck as _newArrowCheck } from "\0rollupPluginBabelHelpers.js";
    2: 
    3: var _this = this;
                   ^
    4: 
    5: import "core-js/modules/es.object.to-string.js";
    ...and 1 other occurrence
    node_modules/penpal/lib/createDestructor.js
    1: import { newArrowCheck as _newArrowCheck } from "\0rollupPluginBabelHelpers.js";
    2: 
    3: var _this = this;
                   ^
    4: 
    5: export default (function (localName, log) {
    ...and 1 other occurrence
    
    ...and 13 other files

I can use getBabelOutputPlugin to process the entire created output and it works, but I'm not sure if it's correct. How can I achieve babel transpiling external library and what is the proper way to do that?

1 Answers

Ended up adding this to output plugins:

getBabelOutputPlugin({
        allowAllFormats: true,
        plugins: ["@babel/plugin-transform-arrow-functions"],
      }),
Related