作为webpack中的外部模块的节点串行端口 - 找不到模块

Question

我试图让node-serialport与电子和webpack一起工作。

我importing serialports as external module：

# 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是节点模块。

如何使它工作？

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

的SerialPort是目前公认：

Answer 1

多小时的挫折后，我从JavaScript这是应该由被的WebPack捆绑index.html文件移到

const SerialPort = require('serialport'); 

。

此外，它似乎像webpack-dev-server不能很好地与电子和串行端口。我必须推出全电子应用程序。