对rollup.js外部变量使用glob或正则表达式模式

Question

是否可以在我的rollup配置中对外部使用glob或正则表达式模式？使用此配置：

export default {
  ...
  external: [
    'prop-types',
    'react',
    'prettier/standalone',
    'prettier/parser-babylon',
    'react-syntax-highlighter/prism-light',
    'react-syntax-highlighter/languages/prism/jsx',
    'react-syntax-highlighter/styles/prism/tomorrow',
    'react-element-to-string'
  ],
  ...
};

我想做一些类似的事情：

export default {
  ...
  external: [
    'prop-types',
    'react',
    'prettier/**',
    'react-syntax-highlighter/**',
    'react-element-to-string'
  ],
  ...
};

Answer 1

这在目前是不可能的。但是，您可以使用一个函数来实现类似的功能：

export default {
  ...
  external(id) {
    return [
      'prop-types',
      'react',
      'prettier',
      'react-syntax-highlighter',
      'react-element-to-string'
    ].includes(id.split('/')[0]);
  },
  ...
};

你应该避免在这个函数中进行昂贵的计算，因为它将被调用很多次(准确地说，每个文件中的每个导入都调用一次)。

另一种选择是将rollup-pluginutils包作为包含createFilter function for glob support的依赖项添加

import { createFilter } from 'rollup-pluginutils';

const external = createFilter([
  'prop-types',
  'react',
  'prettier/**',
  'react-syntax-highlighter/**',
  'react-element-to-string'
], null, {resolve: false});
// {resolve: false} will make sure these filters are not passed to
// path.resolve first and resolved against the current working directory

export default {
  ...
  external,
  ...
};

Answer 2

rollup现在也支持external中的正则表达式，如下所示：

export default {
  external: ['three', /three\/.*/]
}

这会将three和three/*标记为外部变量，我已经在我的项目中使用过了，它的工作方式与预期一致。

有关更多选项，请参阅https://rollupjs.org/guide/en/#external。