extjs - 构建 ExtWebComponents 图表 Web 组件时出现错误，没有匹配的文件，如何解决？

Question

当我构建我的 ExtWebComponents 应用程序时，我收到了这个错误。

错误

ℹ ｢ext｣: C2008: 需求没有匹配的文件 (Ext.chart.theme.Midnight) -- /build/ext/manifest.js:0:13

其他形式的错误

• CORS 策略已阻止从源“null”访问“file:///Users/branflake2267/git/sandbox-ewc/dash-metrics/dash-metrics-client/build/widget/cartesian.js”处的 XMLHttpRequest：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。

我的配置

Ext.require([
  'Ext.chart.theme.Midnight',
  'Ext.chart.theme.Green',
  'Ext.chart.theme.Muted',
  'Ext.chart.theme.Purple',
  'Ext.chart.theme.Sky',
  'Ext.chart.series.Area',
  'Ext.chart.axis.Numeric',
  'Ext.chart.axis.Category'
]);

资源

• https://gist.github.com/branflake2267/07fbe9a79c90e2c85bb34821298d53a8

Answer 1

为了解决这个错误，必须将charts包添加到 ExtWebpackPlugin。

new ExtWebpackPlugin({
  framework: 'web-components',
  toolkit: 'modern',
  theme: 'theme-material',
  emit: emit,
  script: './extract-code.js',
  port: 8080,
  packages: [
      'renderercell',
      'font-ext',
      'ux',
      'd3',
      'pivot-d3',
      'font-awesome',
      'exporter',
      'pivot',
      'calendar',
      'charts', // <<<<<------
      'treegrid',
      'froala-editor'
  ],
  profile: profile,
  environment: environment,
  treeshake: treeshake,
  browser: browser,
  watch: watch,
  verbose: verbose,
  inject: 'yes',
  intellishake: 'no'
})

示例：https ://github.com/sencha/ext-web-components/blob/ext-web-components-7.1.x/packages/ext-web-components-kitchensink/webpack.config.js#L45