Я пытаюсь запустить библиотеку модулей es6 в своем приложении, которую я пытаюсь запустить в браузере. Ниже приведено приложение. js код, который я хочу запустить в браузере.
import BpmnModdle from 'bpmn-moddle';
function hello(){
var moddle = new BpmnModdle
var xmlStr = '<?xml version="1.0" encoding="UTF-8"?>' +
'<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" id="1234"><bpmn:process id="1234"><bpmn:startEvent id="2" name="StartEvent"><bpmn:outgoing>5</bpmn:outgoing></bpmn:startEvent><bpmn:task id="3" name="Task"><bpmn:outgoing>6</bpmn:outgoing><bpmn:incoming>5</bpmn:incoming></bpmn:task><bpmn:endEvent id="4" name="EndEvent"><bpmn:incoming>6</bpmn:incoming></bpmn:endEvent><bpmn:sequenceFlow id="5" name="" source="2" target="3"/><bpmn:sequenceFlow id="6" name="" source="3" target="4"/></bpmn:process><mxGraphModel><root><Workflow label="MyWorkflow" description="" href="" id="0"><mxCell/></Workflow><Layer label="Default Layer" id="1"><mxCell parent="0"/></Layer><Start label="StartEvent" id="2"><mxCell style="symbol;image=images/symbols/event.png;" vertex="1" parent="1"><mxGeometry x="150" y="200" width="80" height="60" as="geometry"/></mxCell></Start><Task label="Task" description="" href="" id="3"><mxCell style="symbol;image=images/task.PNG" vertex="1" parent="1"><mxGeometry x="340" y="190" width="100" height="80" as="geometry"/></mxCell></Task><End label="EndEvent" id="4"><mxCell style="symbol;image=images/symbols/event_end.png" vertex="1" parent="1"><mxGeometry x="550" y="200" width="80" height="60" as="geometry"/></mxCell></End><Edge label="" id="5"><mxCell style="straightEdge" edge="1" parent="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell></Edge><Edge label="" id="6"><mxCell style="straightEdge" edge="1" parent="1" source="3" target="4"><mxGeometry relative="1" as="geometry"/></mxCell></Edge></root></mxGraphModel></bpmn:definitions>';
moddle.fromXML(xmlStr, function(err, definitions) {
console.log(definitions)
// add a root element
var bpmnProcess = moddle.create('bpmn:Process', { id: 'MyProcess_1' });
definitions.get('rootElements').push(bpmnProcess);
moddle.toXML(definitions, function(err, xmlStrUpdated) {
// xmlStrUpdated contains new id and the added process
console.log(xmlStrUpdated)
});
});
}
hello()
Для компиляции приложения. js Я использовал babel. ниже мой babelr c файл
{
"presets": ["es2015"]
}
И я получаю вывод в консоли. Но когда я пытаюсь запустить файл в браузере, я получаю сообщение об ошибке «Требуется не определено»
Я также пытался добавить файл webpack.config. js для объединения проекта. ниже мой webpack.config. js и файл html.
module.exports = {
entry: './app.js',
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
html файл.
<html>
<header><title>This is title</title></header>
<body>
Hello world
<script src="./dist/app.js"></script>
</body>
</html>
После этого я получаю ошибку в виде файла не найдено. может кто-нибудь помочь мне понять, как связать и запустить файл в браузере