Question

我有一个节点js函数-

const BpmnModdle = require('bpmn-moddle')
var bpmn = function () {
  var bm = new BpmnModdle()
  console.log(bm)
}
module.exports = bpmn

我想在纯香草js中调用此函数。

到目前为止我一直在尝试- 我创建了一个fileData javascript文件，其中尝试调用bpmn函数

fileData.js

function createData(xml, node) {
  var bp = bpmn();
  console.log(bp)
}

我尝试将两者打包在webpack中。我的webpack配置文件在哪里

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”。

Answer 1

在调用函数文件中包含bpmn模块，然后调用它。

在您的代码中，您没有将bpmn模块依赖项告诉webpack。

要将模块添加到webpack捆绑包中，必须在调用函数文件/模块中添加module。

示例

创建这样的文件结构。

创建这些文件并粘贴代码。

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文件

我正在使用ES6模块，因为bpmn-moddle软件包不支持commanJS模块系统。

如何在Vanilla JS中调用Node JS的函数？

1 个答案: