bpmn-js with Rails 5.1 webpacker 无法解析模块 'fs'

Question

我刚开始使用 rails 5.1 和 webpacker gem，在尝试配置我的环境以使用 bpmn-js 库时遇到了这个问题。我用 yarn 安装了 bpmn-js 包，但我仍然需要从 bpmn-js examples project 添加一些必需的文件才能在 project/app/javascript/packs/application.js 中正常工作。问题是 application.js 使用 fs 模块创建一个新图表，如下所示：

project/app/javascript/packs/application.js

import 'bpmn-js'
import 'diagram-js'
import 'bpmn-moddle'


import 'bootstrap/dist/css/bootstrap'
import 'bootstrap/dist/css/bootstrap-theme'
import 'bpmn-js/assets/bpmn-font/css/bpmn'
import 'bpmn-js/assets/bpmn-font/css/bpmn-embedded'
//import 'diagram-js/assets/diagram-js'

//import ModelerIndex from 'bpmn_stuff/modeler_index.js';

console.log('Hello World from webpacker')

'use strict';

var $ = require('jquery');
var BpmnModeler = require('bpmn-js/lib/Modeler');

var container = $('#js-drop-zone');

var canvas = $('#js-canvas');

var modeler = new BpmnModeler({ container: canvas });

var newDiagramXML = fs.readFileSync(__dirname + '/../resources/newDiagram.bpmn', 'utf-8');




function createNewDiagram() {
    openDiagram(newDiagramXML);
}
function openDiagram(xml) {
    modeler.importXML(xml, function(err) {

        if (err) {
            container
                .removeClass('with-diagram')
                .addClass('with-error');

            container.find('.error pre').text(err.message);

            console.error(err);
        } else {
            container
                .removeClass('with-error')
                .addClass('with-diagram');
        }


    });
}

function saveSVG(done) {
    modeler.saveSVG(done);
}

function saveDiagram(done) {

    modeler.saveXML({ format: true }, function(err, xml) {
        done(err, xml);
    });
}

function registerFileDrop(container, callback) {

    function handleFileSelect(e) {
        e.stopPropagation();
        e.preventDefault();

        var files = e.dataTransfer.files;

        var file = files[0];

        var reader = new FileReader();

        reader.onload = function(e) {

            var xml = e.target.result;

            callback(xml);
        };

        reader.readAsText(file);
    }

    function handleDragOver(e) {
        e.stopPropagation();
        e.preventDefault();

        e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
    }

    container.get(0).addEventListener('dragover', handleDragOver, false);
    container.get(0).addEventListener('drop', handleFileSelect, false);
}


////// file drag / drop ///////////////////////

// check file api availability
if (!window.FileList || !window.FileReader) {
    window.alert(
        'Looks like you use an older browser that does not support drag and drop. ' +
        'Try using Chrome, Firefox or the Internet Explorer > 10.');
} else {
    registerFileDrop(container, openDiagram);
}

// bootstrap diagram functions

//$(document).on('ready', function() {

    $('#js-create-diagram').click(function(e) {
        e.stopPropagation();
        e.preventDefault();

        createNewDiagram();
    });

    var downloadLink = $('#js-download-diagram');
    var downloadSvgLink = $('#js-download-svg');

    $('.buttons a').click(function(e) {
        if (!$(this).is('.active')) {
            e.preventDefault();
            e.stopPropagation();
        }
    });

    function setEncoded(link, name, data) {
        var encodedData = encodeURIComponent(data);

        if (data) {
            link.addClass('active').attr({
                'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
                'download': name
            });
        } else {
            link.removeClass('active');
        }
    }

    var _ = require('lodash');

    var exportArtifacts = _.debounce(function() {

        saveSVG(function(err, svg) {
            setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg);
        });

        saveDiagram(function(err, xml) {
            setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml);
        });
    }, 500);

    modeler.on('commandStack.changed', exportArtifacts);
//});

您不能在 非节点环境 中使用 'fs' 库。这一行是问题所在：

var newDiagramXML = fs.readFileSync(__dirname + '/../resources/newDiagram.bpmn', 'utf-8');

Answer 1

您不能在 非节点环境 中使用 'fs' 库。我不得不用另一种方法替换它的使用。在查看了一些示例后，我可以更改此行以直接打开图表 XML.

换行：

var newDiagramXML = fs.readFileSync(__dirname + '/../resources/newDiagram.bpmn', 'utf-8');

为此：

var newDiagramXML = '<?xml version="1.0" encoding="UTF-8"?>\n'+
'<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" targetNamespace="http://bpmn.io/schema/bpmn" id="Definitions_1">\n'+
'  <bpmn:process id="Process_1" isExecutable="false">\n'+
'    <bpmn:startEvent id="StartEvent_1"/>\n'+
'  </bpmn:process>\n' +
'  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
'    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
'      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
'        <dc:Bounds height="36.0" width="36.0" x="173.0" y="102.0"/>\n' +
'      </bpmndi:BPMNShape>\n' +
'    </bpmndi:BPMNPlane>\n' +
'  </bpmndi:BPMNDiagram>' +
'</bpmn:definitions>';

bpmn-js with Rails 5.1 webpacker 无法解析模块 'fs'

bpmn-js with Rails 5.1 webpacker Cannot resolve module 'fs'

bpmn.io

ruby-on-rails-5.1

webpacker