1

I want to apply some babel transformations to the code generated by rollup. I want to use the @rollup/plugin-babel plugin with babel-plugin-import but it has no effect on the rollup output, I don't know if I'm doing something wrong in rollup...

If I use getBabelOutputPlugin(...) the output change but the import plugin doesn't work.

Rollup configuration

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import postcss from 'rollup-plugin-postcss';
import copy from 'rollup-plugin-copy';
import json from '@rollup/plugin-json';
import svgr from '@svgr/rollup';
import { babel } from '@rollup/plugin-babel';
import { visualizer } from 'rollup-plugin-visualizer';

import pkg from './package.json';

export default {
  input: 'src/index.tsx',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      exports: 'named',
      sourcemap: true,
    },
    {
      file: pkg.module,
      format: 'esm',
      exports: 'named',
      sourcemap: true,
    },
  ],
  plugins: [
    peerDepsExternal({
      includeDependencies: true,
    }),
    json(),
    svgr(),
    resolve({ extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'] }),
    commonjs({
      include: /\**node_modules\**/,
    }),
    babel({
      babelHelpers: 'bundled',
    }),
    typescript({
      useTsconfigDeclarationDir: true,
      exclude: ['*.d.ts', '**/*.d.ts', '**/*.test.tsx'],
      rollupCommonJSResolveHack: true,
      clean: true,
    }),
    postcss({
      extensions: ['.css', '.less'],
      use: {
        less: { javascriptEnabled: true, modifyVars: {} },
      },
    }),
    visualizer({ filename: 'stats-visualizer.html', gzipSize: true }),
    copy({ targets: [{ src: 'src/styles/**/*', dest: 'dist/styles' }] }),
  ],
};

Babel configuration

// babel.config.js

module.exports = {
  plugins: [['import', { libraryName: 'antd', libraryDirectory: 'lib' }, 'antd']],
};

1 Answer 1

0

You are missing extensions

babel({
  babelHelpers: 'bundled',
  extensions: ['.ts', '.mjs', '.js']
}),

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.