我如何在 vanilla js 中調用 node js 的函數？

Question

我有一個節點 js 功能 -

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

我想在純香草 js 中調用這個函數。

到目前為止我嘗試過的 - 我已經創建了一個 fileData javascript 文件，我試圖在其中調用 bpmn 函數

文件數據.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模塊，然后調用它。

在您的代碼中，您沒有告訴 webpack 有關bpmn模塊依賴項的信息。

要在 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'),
    },

};

包.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"
    }
}

源代碼/索引.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;

索引.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 個解決方案

解決方案1
1 2020-01-14 05:58:49

我如何在 vanilla js 中調用 node js 的函數？

問題描述

1 個解決方案

解決方案1 1 2020-01-14 05:58:49

解決方案1
1 2020-01-14 05:58:49