我如何在 vanilla js 中调用 node js 的函数? [英] How do i call a function of node js in vanilla js?
问题描述
我有一个节点js函数-
i have a node js function -
const BpmnModdle = require('bpmn-moddle')
var bpmn = function () {
var bm = new BpmnModdle()
console.log(bm)
}
module.exports = bpmn
我想在纯原生 js 中调用这个函数.
I want to call this function in pure vanilla js.
到目前为止我尝试过的-我创建了一个 fileData javascript 文件，我试图在其中调用 bpmn 函数
What i have tried so far- i have created a fileData javascript file in which i have tried to call bpmn function
fileData.js
fileData.js
function createData(xml, node) {
var bp = bpmn();
console.log(bp)
}
我试图将两者都捆绑在 webpack 中.我的 webpack 配置文件在哪里
i have tried to bundle both in webpack. Where my webpack config file is
module.exports = {
entry: [
'./javascript/examples/editors/js/bpmn.js',
'./javascript/examples/editors/js/app.js',
'./javascript/examples/editors/js/deletes.js',
'./javascript/examples/editors/js/fileData.js',
'./javascript/examples/editors/js/jsonData.js',
'./javascript/examples/editors/js/new.js',
'./javascript/examples/editors/js/open.js',
'./javascript/examples/editors/js/save.js',
'./javascript/examples/editors/js/saveas.js',
'./javascript/examples/editors/src/js/mxClient.js',
'./node_modules/bpmn-moddle/dist/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "script-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
}
};
我无法在纯 js 中调用此函数，并且收到错误消息未定义 bpmn".
I am unable to call this function in pure js and i am getting an error saying "bpmn is not defined".
推荐答案
在调用函数文件中包含 bpmn 模块，然后调用它.
Include the bpmn module in the calling function file and then call it.
在您的代码中，您没有将 bpmn 模块依赖项告诉 webpack.
In your code your are not telling the webpack about the bpmn module dependency.
要将模块添加到 webpack 包中，您必须在调用函数文件/模块中添加 module.
To add the module in the webpack bundle you have to add the module in the calling function file/Module.
示例
像这样创建文件结构.
创建这些文件并粘贴代码.
Create these file and paste the code.
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
Package.json
{
"name": "Stackoverflow",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bpmn-moddle": "^6.0.0"
},
"devDependencies": {
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
}
}
src/index.js
import bpmn from './bpmnModdle.js';
function createData(xml, node) {
var bp = bpmn();
console.log(bp)
console.log('Module called');
}
createData();
src/bpmnModdle.js
import BpmnModdle from 'bpmn-moddle';
var bpmn = function () {
var bm = new BpmnModdle();
console.log('bm', bm)
console.log('From inside the module');
return 'exported'
}
export default bpmn;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../dist/bundle.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
运行 npm install
运行 npm run build
在浏览器中打开 index.html 文件
Open the index.html file in the browser
我正在使用 ES6 模块，因为 bpmn-moddle 包不支持 commanJS 模块系统.
I am using
ES6module as thebpmn-moddlepackage doesn't supportcommanJSmodule system.
这篇关于我如何在 vanilla js 中调用 node js 的函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
