开发者问题收集

Node-serial 端口作为 webpack 中的外部模块-未找到模块

2017-09-27
3501
javascript node.js webpack node-serialport

我正在尝试让 node-serialport 与 electron 和 webpack 一起工作。

我正在 将 serialports 作为外部模块导入 ： 

# webpack.config.js

externals: {
  serialport: "serialport"
}

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

// 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 编译所有内容时没有错误，但我有一个浏览器控制台错误： 

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 中的这个错误： 

/* 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 docs on externals ，我想我需要以某种方式将 serialport 作为全局变量包含在内，但该示例针对的是 jQuery，它是一个 js 文件，而 serialport 是节点模块。

如何使其工作？

3个回答

经过几个小时的挫折，我终于将 

const SerialPort = require('serialport');

从应该由 webpack 打包的 javascript 文件移到了 index.html: 

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

SerialPort 现在可以识别了。

此外，webpack-dev-server 似乎无法很好地与 Electron 和 serialport 配合使用。我必须启动完整的 electron 应用程序。

Patryk
2017-10-03

尝试 remote 。

您可能还想尝试使用 remote ： 

const SerialPort = require( "electron" ).remote.require( "serialport" );
Joshua Pinter
2018-05-27

使用 eval 

const serialport = eval(`require('serialport')`)
HZ1
2021-11-23