Slickgrid + Webpack + Flask 的最小工作示例

Question

我想在我的 Python Flask 项目中包含 slickgrid（

npm install slickgrid

、slickgrid.net），但我不想使用 CDN，所以我正在寻找 Webpack 解决方案。

我一直在遵循使用 Webpack 在 Flask 中集成 npm 包的过程，并作为起点，我分叉了以下最小工作示例 https://github.com/jrybicki-jsc/flasknpm 默认情况下工作正常。

我将文件 my.js 更改为简单：

import SlickGrid from 'slickgrid';

但是当我运行命令

npm run build

（使用 webpack）时，出现以下错误：

ERROR in ./node_modules/slickgrid/dist/esm/index.js
Module parse failed: Unexpected token (67:54)
You may need an appropriate loader to handle this file type.
|    */
|   stopPropagation() {
|     this._isPropagationStopped = !0, this.nativeEvent?.stopPropagation();
|   }
|   /**
 @ ./src/my.js 1:0-34

作为一名 MWE，我想让 Slickgrid“Example1” 正常工作，可以在官方

slickgrid

存储库中的此链接中找到该示例： 示例1

有人知道如何通过 Webpack 将 Slickgrid 与 Flask 集成吗？

Answer 1

您从 SlickGrid ESM dist 文件夹中收到错误，这证明您应该使用带有命名导入的 ESM 方法。但是，您尝试使用默认导出来导入它，我不认为 ESM 捆绑包作为默认导出，因此这不是 ESM 导入的正确方法。

如果你看一下 ESM 的 1 个示例，你可以看到像这样导入的代码

import {
  Editors,
  Formatters,
  SlickGlobalEditorLock,
  SlickRowSelectionModel,
  SlickColumnPicker,
  SlickDataView,
  SlickGridMenu,
  SlickGridPager,
  SlickGrid,
  Utils,
} from '../dist/esm/index.js';
// OR preferably use the code below when installing from npm
// import { SlickGrid, ... } from 'slickgrid';

只需将

from '../dist/esm/index.js'

（因为它仅供演示本身使用）替换为

from 'slickgrid'

。所以你应该有像下面这样的东西，这应该可以帮助你开始

import { SlickGrid, SlickDataView } from 'slickgrid';

我从未使用过Python，所以我不完全确定，但我希望它对你有用