如何使用 npm/webpack 正确导入 Gridstack?

Posted

技术标签:

【中文标题】如何使用 npm/webpack 正确导入 Gridstack?【英文标题】:How to correctly import Gridstack using npm/webpack? 【发布时间】:2020-06-21 10:51:54 【问题描述】:

我使用 npm 安装 gridstack 库。

我以前使用 gridstack 作为标准 js 库,但现在我想使用 npm/webpack 包含它,而不是自己直接包含它。 我不明白我需要包含什么才能使其正常工作。

我也在使用 v1.1 版本,需要什么依赖项?只有 gridstack 还是你还需要 jquery-ui ?

Main.js

import Gridstack from 'gridstack' //what I need to put here ?

var grid = Gridstack.init();
console.log(grid);

包.json

"dependencies": 
    "@babel/polyfill": "^7.8.3",
    "@babel/runtime": "^7.8.7",
    "gridstack": "^1.1.0",
 ,
"devDependencies": 
    "@babel/core": "^7.8.4",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "autoprefixer": "^8.6.4",
    "babel-loader": "^8.0.6",
    "cross-env": "^7.0.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  ,

目前我有以下错误:

TypeError: gridstack__WEBPACK_IMPORTED_MODULE_7___default.a.init is not a function

【问题讨论】:

【参考方案1】:

现在可以在刚刚发布的 1.2.1 中使用(请参阅发行说明)

import 'jquery';
import 'jquery-ui';

import 'gridstack/dist/gridstack-poly'; // optional IE support
import GridStack from 'gridstack';
import 'gridstack/dist/gridstack.jQueryUI';
import 'gridstack/dist/gridstack.css';

但建议您只使用 2.x (native typescript re-write),它只需要这个:

import  GridStack, $  from 'gridstack'; // $ optional if you depend on it, to be removed in 3.x
import 'gridstack/dist/gridstack.css';

可能还想看看 https://github.com/gridstack/gridstack.js#jquery-application

【讨论】:

【参考方案2】:

我发现对我有用的一个技巧是导入 gridstack,如下所示:

import 'gridstack/dist/jquery';
import 'gridstack/dist/gridstack';
import 'gridstack/dist/jquery-ui';
import 'gridstack/dist/gridstack.jQueryUI';

还有一个相关的open issue讨论了这个问题。

【讨论】:

感谢您的回答。目前我使用 CDN 版本,因为 TypeScript 项目(从 NPM 导入时使用的项目)存在问题。我将您的解决方案标记为答案,因为导入有效,但可能其他看到此问题的人需要等待 npm 东西的稳定版本

以上是关于如何使用 npm/webpack 正确导入 Gridstack?的主要内容,如果未能解决你的问题,请参考以下文章

Vue CLI 使用 npm webpack 打包发布 + Asp.net Web Api 后端调试

npm+webpack+babel+react安装

npm + webpack +react

npm webpack:找不到命令

像 vue.js 组件一样可排序(没有 npm / webpack)或在 vue 区域内使用 jQuery 插件

npm webpack vue-cli