如何从生产汇总构建中删除 React PropTypes？

Question

我创建了一个 npm 库，我正在探索使用 rollup 进行捆绑。这是配置：

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
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
      }),
      commonjs({
        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
      }),
      commonjs({
        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()]
  }
];

我想从 IIFE 构建的产品构建中删除道具类型。 babel-plugin-transform-react-remove-prop-types 很好地删除了 prop types 声明，但由于我在汇总配置中将 prop-types 声明为全局，因此它将其保留为依赖项。当我从全局变量中删除它时，它会解析包并将其捆绑在最终构建中。我应该在这里做什么？我的构建配置也是最佳的 w.r.t。创建 iife、cjs 和 esm 版本？

Answer 1

您可以使用 transform-react-remove-prop-types 带有选项 removeImport: true 的 babel 插件。所以这个条件最终从构建中删除了 prop-types。

例如

['transform-react-remove-prop-types', { removeImport: true }]。

如何从生产汇总构建中删除 React PropTypes？

How to remove React PropTypes from production rollup build?

javascript

reactjs

rollupjs