节点串行端口作为Webpack中的外部模块-找不到模块 [英] Node-serial port as external module in webpack - module not found

问题描述

我正在尝试使node-serialport与电子和webpack一起使用.

I'm trying to get node-serialport to work with electron and webpack.

我将串行端口作为外部模块导入:

# webpack.config.js

externals: {
  serialport: "serialport"
}

这是我应用程序中的代码:

This is the code in my app:

// read NMEA data from serial port
const SerialPort = require('serialport');
console.log(SerialPort.list());

const Readline = SerialPort.parsers.Readline;
const port = new SerialPort('/dev/tty.Redmi-ShareGPS', { baudRate: 4800 });
const parser = port.pipe(new Readline({ delimiter: '\r\n' }));



// Open errors will be emitted as an error event
port.on('error', function(err) {
  console.log(err.message);
})

// send NMEA data to GPS.js
parser.on('data', function(data) {
  // gps.update(data);
});

问题在第一行:const SerialPort = require('serialport');

Webpack编译所有内容都没有错误，但是我遇到了浏览器控制台错误:

Webpack compiles everything without error, but I have a browser console error:

Uncaught ReferenceError: serialport is not defined
    at Object.<anonymous> (bundle.js:65651)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:65630)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:31520)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:25595)
    at __webpack_require__ (bundle.js:20)
    at _ol_ (bundle.js:63)
    at bundle.js:66

webpack生成的bundle.js的起源:

Which origins at this in webpack generated bundle.js:

/* 315 */
/***/ (function(module, exports, __webpack_require__) {

// read NMEA data from serial port
const SerialPort = __webpack_require__(316);
console.log(serialport.list());

const Readline = SerialPort.parsers.Readline;
const port = new SerialPort('/dev/tty.Redmi-ShareGPS', { baudRate: 4800 });
const parser = port.pipe(new Readline({ delimiter: '\r\n' }));

// Open errors will be emitted as an error event
port.on('error', function (err) {
  console.log(err.message);
});

// send NMEA data to GPS.js
parser.on('data', function (data) {
  // gps.update(data);
});

/***/ }),
/* 316 */
/***/ (function(module, exports) {

module.exports = serialport;

/***/ })
/******/ ]);

错误行恰好是module.exports = serialport;

根据关于外部组件的webpack文档，我想我需要以某种方式包括serialport作为全局变量，但是该示例适用于js文件的jQuery，而serialport是节点模块.

According to webpack docs on externals, I suppose I somehow need to include serialport as a global variable, but the example is for jQuery which is a js file, and serialport is node module.

如何使其工作?

推荐答案

经过数小时的挫折，我搬走了

After many hours of frustration, I moved

const SerialPort = require('serialport');

从应该由webpack捆绑到index.html的javascript文件中:

from javascript file which is supposed to be bundled by webpack to index.html:

<script>
  const SerialPort = require('serialport');
</script>
<script src="dist/bundle.js"></script>

SerialPort现在可以识别了.

SerialPort is now recognized.

此外，似乎webpack-dev-server在Electron和serialport上不能很好地工作.我必须启动完整的电子应用程序.

Also, it seems like webpack-dev-server doesn't work very well with Electron and serialport. I have to launch full electron app.

这篇关于节点串行端口作为Webpack中的外部模块-找不到模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！