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

Question

是否可以在我的汇总配置中对外部使用 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

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

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

这会将 three 和 three/* 标记为外部，我在我的项目中使用过，它按预期工作。

更多选项请参考https://rollupjs.org/guide/en/#external。

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

Use glob or regex pattern for rollup.js externals

javascript

bundle

rollupjs