How to correctly translate specific code in node_modules by tweaking Rollup and Babel configurations?

Tips for Babel to translate specific code in node_modules when Rollup is packaged

During the front-end project packaging process, Rollup is responsible for module processing and Babel is responsible for code translation. However, Babel sometimes fails to properly handle specific packages in node_modules . This article will explain how to resolve this issue.

Problem: Babel failed to translate specific code in node_modules

Suppose we use Rollup to package, we need to use Babel to translate the @xyflow package in node_modules , but the null value merge operator in the @xyflow package ?? cannot be translated.

The Babel configuration in the Rollup configuration file ( rollup.config.mjs ) is as follows:

 babel({
  extensions: ['.js', '.jsx', '.mjs'],
  presets: ['@babel/preset-env'],
  babelHelpers: 'runtime',
  include: ['src/**/*', 'node_modules/@xyflow/**/*'],
}),

The Babel configuration file ( babel.config.json ) is as follows:

 {
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": "3",
        "targets": {
          "ie": 11
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3,
        "helpers": true,
        "regenerator": true,
        "babelHelpers": "runtime"
      }
    ],
    ["@babel/plugin-proposal-class-properties"],
    ["@babel/plugin-proposal-nullish-coalescing-operator"]
  ]
}

Version information:

 <code>"rollup": "4.22.5", "@babel/core": "7.25.2", "@babel/plugin-proposal-class-properties": "7.18.6", "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-transform-react-jsx": "7.25.2", "@babel/plugin-transform-runtime": "7.25.4", "@babel/preset-env": "7.25.4", "@babel/preset-react": "7.24.7", "@babel/runtime-corejs3": "7.25.6",</code>

Solution: Improve include rules

The problem is that the match of the include rules is not accurate enough. The original configuration cannot exactly match all files under @xyflow package.

Improved include configuration:

 include: ['src/**/*', /node_modules\/((?:.*[/\\])?@xyflow(?:[/\\].*)?)/],

Use regular expressions to more flexibly match all files in node_modules/@xyflow directory, thus ensuring that Babel correctly translates the code in the @xyflow package and solves the problem of untranslated ?? operators.

Through this case, we understand the details of Rollup and Babel configurations are crucial, especially when dealing with specific packages in node_modules , where precise include rules are key.

The above is the detailed content of How to correctly translate specific code in node_modules by tweaking Rollup and Babel configurations?. For more information, please follow other related articles on the PHP Chinese website!