I have created an npm library, where I am exploring using rollup for bundling. Here is the config:

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import monjs from 'rollup-plugin-monjs';
import { terser } from 'rollup-plugin-terser';
import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
import pkg from './package.json';

const input = 'src/index.js';
const name = 'TooltipTrigger';
const globals = {
  react: 'React',
  'react-dom': 'ReactDOM',
  'prop-types': 'PropTypes',
  'react-popper': 'ReactPopper'
};
const external = id => !id.startsWith('.') && !id.startsWith('/');
const getBabelOptions = ({ useESModules = true } = {}) => ({
  exclude: 'node_modules/**',
  runtimeHelpers: true,
  plugins: [['@babel/plugin-transform-runtime', { useESModules }]]
});

export default [
  {
    input,
    output: {
      name,
      file: 'dist/react-popper-tooltip.js',
      format: 'iife',
      globals
    },
    external: Object.keys(globals),
    plugins: [
      resolve({
        browser: true,
        modulesOnly: true
      }),
      monjs({
        include: 'node_modules/**'
      }),
      babel(getBabelOptions()),
      sizeSnapshot()
    ]
  },
  {
    input,
    output: {
      name,
      file: 'dist/react-popper-tooltip.min.js',
      format: 'iife',
      globals
    },
    external: Object.keys(globals),
    plugins: [
      resolve({
        browser: true,
        modulesOnly: true
      }),
      monjs({
        include: 'node_modules/**'
      }),
      babel(getBabelOptions()),
      terser(),
      sizeSnapshot()
    ]
  },
  {
    input,
    output: { file: pkg.main, format: 'cjs' },
    external,
    plugins: [babel(getBabelOptions({ useESModules: false })), sizeSnapshot()]
  },
  {
    input,
    output: { file: pkg.module, format: 'esm' },
    external,
    plugins: [babel(getBabelOptions()), sizeSnapshot()]
  }
];

I want to remove prop types from prod builds in the IIFE build. The babel-plugin-transform-react-remove-prop-types removes the prop types declarations well, but since I have declared prop-types as global in rollup config, it keeps it as a dependency. When I remove it from globals, it resolves the package and bundles it inside the final build. What should I do here? Also is my build config optimal w.r.t. creating iife, cjs and esm builds?

I have created an npm library, where I am exploring using rollup for bundling. Here is the config:

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import monjs from 'rollup-plugin-monjs';
import { terser } from 'rollup-plugin-terser';
import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
import pkg from './package.json';

const input = 'src/index.js';
const name = 'TooltipTrigger';
const globals = {
  react: 'React',
  'react-dom': 'ReactDOM',
  'prop-types': 'PropTypes',
  'react-popper': 'ReactPopper'
};
const external = id => !id.startsWith('.') && !id.startsWith('/');
const getBabelOptions = ({ useESModules = true } = {}) => ({
  exclude: 'node_modules/**',
  runtimeHelpers: true,
  plugins: [['@babel/plugin-transform-runtime', { useESModules }]]
});

export default [
  {
    input,
    output: {
      name,
      file: 'dist/react-popper-tooltip.js',
      format: 'iife',
      globals
    },
    external: Object.keys(globals),
    plugins: [
      resolve({
        browser: true,
        modulesOnly: true
      }),
      monjs({
        include: 'node_modules/**'
      }),
      babel(getBabelOptions()),
      sizeSnapshot()
    ]
  },
  {
    input,
    output: {
      name,
      file: 'dist/react-popper-tooltip.min.js',
      format: 'iife',
      globals
    },
    external: Object.keys(globals),
    plugins: [
      resolve({
        browser: true,
        modulesOnly: true
      }),
      monjs({
        include: 'node_modules/**'
      }),
      babel(getBabelOptions()),
      terser(),
      sizeSnapshot()
    ]
  },
  {
    input,
    output: { file: pkg.main, format: 'cjs' },
    external,
    plugins: [babel(getBabelOptions({ useESModules: false })), sizeSnapshot()]
  },
  {
    input,
    output: { file: pkg.module, format: 'esm' },
    external,
    plugins: [babel(getBabelOptions()), sizeSnapshot()]
  }
];

I want to remove prop types from prod builds in the IIFE build. The babel-plugin-transform-react-remove-prop-types removes the prop types declarations well, but since I have declared prop-types as global in rollup config, it keeps it as a dependency. When I remove it from globals, it resolves the package and bundles it inside the final build. What should I do here? Also is my build config optimal w.r.t. creating iife, cjs and esm builds?

• javascript
• reactjs
• rollupjs

Share Improve this question Follow edited Sep 24, 2018 at 15:18 mohsinulhaq asked Sep 24, 2018 at 15:01 mohsinulhaqmohsinulhaq 1,10711 gold badge2020 silver badges3232 bronze badges 1

• add 'prop-types' to the global – Jalal Commented Nov 7, 2018 at 14:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You can use transform-react-remove-prop-types babel plugin with options removeImport: true. So this condition finally remove prop-types from build.

['transform-react-remove-prop-types', { removeImport: true }] for example.