运行浏览器中的节点模块

Question

我正在尝试使用此节点模块上传和读取 excel 文件：read-excel-file 并根据 Browser 下的说明，我需要将我的 .js 文件中的这段代码：

import readXlsxFile from 'read-excel-file'

const input = document.getElementById('input')

input.addEventListener('change', () => {
  readXlsxFile(input.files[0]).then((rows) => {
    // `rows` is an array of rows
    // each row being an array of cells.
  })
})

但是浏览器不知道什么是import readXlsxFile from 'read-excel-file'。应该注意的是，我正在使用 http-server 在 http://localhost:8080/

查看我的项目

Answer 1

TL;DR：您必须实际将 JS 代码编译成浏览器可用的代码。使用 webpack or other bundling tools 这样做。

长话短说：浏览器不理解import（因为例如：资源在哪里？）。您可以使用 webpack 等工具创建 JavaScript 代码包，这些代码在编译时检测到从 YY 导入 XX 意味着它们必须在 node_modules 或 bower_modules 文件夹中查找该模块，并且将其包含在最终包中

PS：请注意，并非所有 npm 模块都能够在浏览器中运行，因为它们是节点模块，反之亦然（它们提供不同的 API）。

Answer 2

答案可能是不同的图书馆。浏览器中的作品之一是 sheetjs.

这里有一个工作演示：https://sheetjs.com/demos/modify.html

运行浏览器中的节点模块

Run node module in browser

javascript

httpserver

node.js

npm

node-modules

运行 浏览器中的节点模块

Run node module in browser

javascript

httpserver

node.js

npm

node-modules

运行浏览器中的节点模块