我正在尝试在浏览器中运行我的应用程序中的es6模块库。下面是我要在浏览器中运行的app.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()
我使用babel编译app.js。下面是我的babelrc文件
{
"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>
完成此操作后，我收到错误消息，找不到文件。有人可以帮助我了解如何在浏览器中捆绑和运行文件]
您正在运行的构建脚本是什么？找不到什么文件。你能详细说明一下吗？