Как мне вызвать функцию node js в ванили js? - PullRequest
Новая
       30

Как мне вызвать функцию node js в ванили js?

1 голос
/ 14 января 2020

У меня есть node 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 

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 не определено".

1 Ответ

1 голос
/ 14 января 2020

Включите модуль bpmn в файл вызывающей функции и затем вызовите его.

В вашем коде вы не говорите веб-пакету о зависимости модуля bpmn.

Чтобы добавить модуль в пакет веб-пакета, необходимо добавить module в файл / модуль вызывающей функции.

Пример

Создать структура файла выглядит следующим образом.

enter image description here

Создайте этот файл и вставьте код.

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

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>

Run npm install
Выполнить npm run build

Открыть индексный файл. html файл в браузере

Я использую модуль ES6, так как пакет bpmn-moddle не делает поддержка commanJS модульная система.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...