使用 Laravel Mix 導入和使用節點模塊的正確方法

Question

我剛開始在項目中使用 Laravel (v 8.x) Mix，發現從節點模塊實現 Javascript 令人沮喪。

首先，我的webpack.mix.js中有這個：

mix.js('node_modules/mxgraph/javascript/mxClient.min.js', 'public/js');
mix.js('resources/js/*.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]).version();

接下來，我的app.js包含以下內容：

import Canvas from './canvas';

require('mxgraph');

const canvas = new Canvas();

...進口canvas.js ：

export default class Canvas {
    constructor() {
        this.container = document.getElementById('graphContainer');
        if (!mxClient.isBrowserSupported())
        {
            // Displays an error message if the browser is not supported.
            alert('Browser is not supported!');
        }
.
.
.
    }
}

...在我的 Blade 布局的腳本部分：

<script src="{{ mix('js/mxClient.min.js') }}" defer></script>
<script src="{{ mix('js/app.js') }}" defer></script>

當我加載頁面時，我在控制台中收到以下錯誤：

Uncaught ReferenceError: mxClient is not defined
    at new Canvas (app.js:3866)
    at Module../resources/js/app.js (app.js:3813)
    at __webpack_require__ (app.js:114081)
    at app.js:114143
    at app.js:114149

var mxClient肯定存在於mxClient.min.js中，並且在Canvas中對它的引用發生在它加載之后。

我嘗試了很多變體，但似乎沒有任何效果。 任何指導將不勝感激。

Answer 1

所以，在玩了之后，我發現了你可以做什么。

組裝一個文件

將mxClient.min.js和app.js放入一個文件中

mix.js(
    [
        "resources/js/app.js",
        "node_modules/mxgraph/javascript/mxClient.min.js",
    ],
    "public/js"
).postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]).version();

導入mxGraph和 Canvas

在你的app.js你可以把它

import "./canvas";

require("mxgraph");

const canvas = new Canvas();

和npm run dev運行沒有問題。

更新

我找到了一個（也許更容易）的選擇。 不要在您的webpack.mix.js mxClient只需要您的app.js 。

// app.js

window.mxClient = new require("mxgraph")().mxClient;

let isBrowserSupported = mxClient.isBrowserSupported();

console.log(isBrowserSupported);

Answer 2

經過更多的探索和搜索，我找到了一種有效的方法。 這是基於我在這里找到的：

https://www.programmersought.com/article/85491421858/

我的實現似乎有點笨拙，但它確實有效，我現在可以繼續我正在嘗試使用 mxGraph 開發的項目。

因此，我不再在mxgraph中顯式webpack.mix.js ，因此它現在恢復為 Laravel 默認值：

mix.js('resources/js/*.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]).version();

我還刪除了require('mxgraph'); 來自app.js ，所以它看起來像這樣：

import Canvas from './canvas';

const canvas = new Canvas();

我的canvas.js現在看起來像這樣：

import mx from 'mxgraph';

const mxgraph = mx({
    mxImageBasePath: './src/images',
    mxBasePath: './src'
});

window.mxGraph = mxgraph.mxGraph;
window.mxGraphModel = mxgraph.mxGraphModel;
window.mxEvent = mxgraph.mxEvent;
window.mxEditor = mxgraph.mxEditor;
window.mxGeometry = mxgraph.mxGeometry;
window.mxRubberband = mxgraph.mxRubberband;
window.mxDefaultKeyHandler = mxgraph.mxDefaultKeyHandler;
window.mxDefaultPopupMenu = mxgraph.mxDefaultPopupMenu;
window.mxStylesheet = mxgraph.mxStylesheet;
window.mxDefaultToolbar = mxgraph.mxDefaultToolbar;

const {mxGraph, mxClient, mxEvent, mxCodec, mxUtils, mxConstants, mxPerimeter, mxRubberband} = mxgraph;

export default class Canvas {
    constructor() {
        let container = document.getElementById('graphContainer');
        if (typeof(mxClient) !== 'undefined') {
            this.draw(container);
        }
    }

    draw (container) {
        if (! mxClient.isBrowserSupported())
        {
            // Displays an error message if the browser is not supported.
            mxUtils.error('Browser is not supported!', 200, false);
        }
        else
        {
            // Disables the built-in context menu
            mxEvent.disableContextMenu(container);

            // Creates the graph inside the given container
            var graph = new mxGraph(container);

            // Enables rubberband selection
            new mxRubberband(graph);

            // Gets the default parent for inserting new cells. This
            // is normally the first child of the root (ie. layer 0).
            var parent = graph.getDefaultParent();

            // Adds cells to the model in a single step
            graph.getModel().beginUpdate();
            try
            {
                var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
                var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
                var e1 = graph.insertEdge(parent, null, '', v1, v2);
              
            }
            finally
            {
                // Updates the display
                graph.getModel().endUpdate();
            }
        }
    }
}

draw()方法中的大部分代碼取自 mxGraph “Hello World”演示（ https://jgraph.github.io/mxgraph/docs/manual.ZFC35FDC70D5FC69D7A69883A822C ）

非常感謝@codedge 為您花時間幫助我！