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?