时间戳

首页 > 解决方案 > Babel如何处理外部包

typescript - Babel如何处理外部包

问题描述

我有一个通过 Rollup 使用 TS 和 Babel 的项目，这个项目使用外部包，我有一个问题 - 输出代码包含来自这个外部库的箭头函数，它在我的目标环境（IE 11）中不起作用。

如何使用 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,
  };
};

如果我将外部库添加到 babel 包含列表，我会收到一堆错误

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

输出：

    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/child/connectToParent.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/parent/connectToChild.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/parent/connectToChild.js (101:8)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/createDestructor.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/createDestructor.js (28:8)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/methodSerialization.js (4:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/startConnectionTimeout.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/startConnectionTimeout.js (33:8)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/createLogger.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/createLogger.js (24:8)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/child/handleSynAckMessageFactory.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/child/handleSynAckMessageFactory.js (58:8)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/parent/getOriginFromSrc.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/parent/getOriginFromSrc.js (61:8)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/parent/handleAckMessageFactory.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/parent/handleAckMessageFactory.js (68:8)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/parent/handleSynMessageFactory.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/parent/handleSynMessageFactory.js (32:8)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/parent/monitorIframeRemoval.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/parent/monitorIframeRemoval.js (36:8)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/parent/validateIframeHasSrcOrSrcDoc.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/parent/validateIframeHasSrcOrSrcDoc.js (14:8)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/connectCallReceiver.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/connectCallReceiver.js (115:8)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/connectCallSender.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/connectCallSender.js (136:8)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/errorSerialization.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/generateId.js (3:12)
    (!) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。
    node_modules/penpal/lib/generateId.js (14:8)
    (!) `this` 已被重写为 `undefined`
    https://rollupjs.org/guide/en/#error-this-is-undefined
    node_modules/penpal/lib/child/connectToParent.js
    1：从“\0rollupPluginBabelHelpers.js”导入 { newArrowCheck as _newArrowCheck }；
    2：
    3: 变量 _this = 这个；
                   ^
    4：
    5：导入“core-js/modules/es.regexp.constructor.js”；
    ...和其他 1 次出现
    node_modules/penpal/lib/parent/connectToChild.js
    1：从“\0rollupPluginBabelHelpers.js”导入 { newArrowCheck as _newArrowCheck }；
    2：
    3: 变量 _this = 这个；
                   ^
    4：
    5：导入“core-js/modules/es.object.to-string.js”；
    ...和其他 1 次出现
    node_modules/penpal/lib/createDestructor.js
    1：从“\0rollupPluginBabelHelpers.js”导入 { newArrowCheck as _newArrowCheck }；
    2：
    3: 变量 _this = 这个；
                   ^
    4：
    5：导出默认（函数（localName，日志）{
    ...和其他 1 次出现
    
    ...和其他 13 个文件

我可以使用 getBabelOutputPlugin 来处理整个创建的输出并且它可以工作，但我不确定它是否正确。如何实现 babel 转译外部库，正确的方法是什么？

标签： typescriptbabeljsrollup

解决方案

最终将其添加到输出插件中：

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

推荐阅读