Fatal编程技术网
  • javascript/
  • Javascript 在vanilla js中如何调用node js的函数？

Javascript 在vanilla js中如何调用node js的函数？

javascript node.js webpack

Javascript 在vanilla js中如何调用node js的函数？,javascript,node.js,webpack,Javascript,Node.js,Webpack,我有一个节点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 createDat

我有一个节点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)
}
我试着把这两个都打包到网页包中。我的网页包配置文件在哪里

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

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

在您的代码中，您没有告诉网页有关
bpmn
模块依赖关系的信息

要在网页包包中添加模块，必须在调用函数文件/模块中添加
模块

示例

像这样创建文件结构

创建这些文件并粘贴代码

webpack.config.js

const path = require('path');
module.exports = {

    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },

};




import bpmn from './bpmnModdle.js';
function createData(xml, node) {
  var bp = bpmn();
  console.log(bp)
console.log('Module called');
}

createData();


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;
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

const path = require('path');
module.exports = {

    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },

};




import bpmn from './bpmnModdle.js';
function createData(xml, node) {
  var bp = bpmn();
  console.log(bp)
console.log('Module called');
}

createData();


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;
src/bpmnModdle.js

const path = require('path');
module.exports = {

    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },

};




import bpmn from './bpmnModdle.js';
function createData(xml, node) {
  var bp = bpmn();
  console.log(bp)
console.log('Module called');
}

createData();


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安装

运行
npm运行构建

在浏览器中打开index.html文件

我正在使用
ES6
模块，因为
bpmn模块
包不支持
commanJS
模块系统


“纯香草JS”是什么意思？Vanilla JS是一种语言，而不是一种技术，所以：你想用什么来运行它？你是说你想在浏览器中运行它吗？是的，在浏览器中。我只想在纯javascript程序中访问一个用node js编写的函数。我的主要目标是在纯javascript程序中访问一个用node js编写的函数。那么我应该怎么做呢？它应该在Web包包后可用。你必须在中添加代码主捆绑包使用webpack，否则您将无法访问代码。模块已封装，但在全球范围内不可用。如果你想使用它，那么你必须
要求
它，然后你就可以使用它。我明白了吗？我的意思是我已经在我的webpack.config.js中添加了module.exports={entry:['./javascript/examples/editors/js/bpmn.js'，]}。当我试图在fileData.js中要求bpmn js时，它说没有定义require！！请帮助？是的，正确，但您必须像这样编写依赖代码<代码>常量bpmn=require（'./bpmnModdle.js'）；函数createData（xml，node）{var bp=bpmn（）；console.log（bp）}
。所以它告诉webpack我需要这个模块。然后webpack将允许访问此模块。