代码之家  ›  专栏  ›  技术社区  ›  mohsinulhaq

如何从生产汇总生成中删除React PropTypes?

  •  2
  • mohsinulhaq  · 技术社区  · 6 年前

    我已经创建了一个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类型声明,但是由于我在rollup config中将prop类型声明为global,所以它将其作为依赖项保留。当我从globals中删除它时,它解析包并将其捆绑到最终构建中。我该怎么办?我的构建配置是否也是最佳的w.r.t.创建ilife、cjs和esm构建?

    1 回复  |  直到 6 年前
        1
  •  4
  •   DenRedSky    6 年前

    你可以用 transform-react-remove-prop-types removeImport: true . 所以这个条件最终会从构建中删除道具类型。

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