使用 webpack 导入 gojs 扩展答案

【问题标题】：Import gojs extension using webpack使用 webpack 导入 gojs 扩展
【发布时间】：2021-07-08 13:47:24
【问题描述】：

我将 Laravel 8 与 Laravel-mix 一起使用，以便我的 JS 资产使用 webpack 进行编译。

我已经通过这样做成功导入了gojs：

npm i gojs

然后将此添加到我的bootstrap.js：

import * as go from 'gojs';

然后编译使用：

npm run dev

到目前为止，我的app.js 现在包含gojs 代码，我可以在我的页面上运行基本的gojs 示例。

但是我不知道如何包含任何 gojs 扩展。

我已经尝试以所有这些不同的方式（分别不是一次全部）向我的boostrap.js 添加扩展名：

import DataInspector from 'gojs/extensions/DataInspector.js';
import * as Inspector from 'gojs/extensions/DataInspector.js';
import { DataInspector } from 'gojs/extensionsTS/DataInspector';
require('gojs/extensions/DataInspector.js');
require('../../node_modules/gojs/extensions/DataInspector.js');

大多数编译都没有错误，当我检查我的 app.js 编译的 javascript 时，似乎包含了 DataInspector 代码。

但是，当我向使用 Inspect 的页面添加示例脚本时，出现错误：

Uncaught ReferenceError: Inspector is not defined

看来 DataInspector 扩展并没有被包括在内。我可以让它工作的唯一方法是直接在我的 HTML 中的 DataInspector.js 文件中添加一个脚本标记。但是，我想弄清楚如何将它与我的所有其他资产一起正确导入。

【问题讨论】：

标签： javascript webpack laravel-8 gojs

【解决方案1】：

最好将扩展文件复制到您自己的目录中以使用它们。它们是作为如何扩展库的示例提供的，不应直接导入。

如果您查看扩展代码，您会看到它带有以下警告：

/*
* This is an extension and not part of the main GoJS library.
* Note that the API for this class may change with any version, even point releases.
* If you intend to use an extension in production, you should copy the code to your own source directory.
* Extensions can be found in the GoJS kit under the extensions or extensionsTS folders.
* See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
*/

【讨论】：