如何在浏览器中使用npm包

参考链接：cloud.tencent.com/developer/a…

基本步骤

使用npm安装所需的包。
编写一个main.js文件，通过require引入npm包，并将其赋值给window对象的一个属性，以便在浏览器中全局访问。
使用browserify工具将main.js打包成一个bundle.js文件。
在HTML中通过<script>标签引入bundle.js，这样就可以在浏览器中使用原本只提供npm版本的JavaScript库了。

代码示例：

需求：使用npm第三方库实现以Post方式发送EventSource请求（官方只支持GET请求）

第三方库地址：github.com/Azure/fetch…

1. 首先要在项目文件夹根目录安装库

npm install @microsoft/fetch-event-source

2. 在JavaScript文件中导入库

import { fetchEventSource } from '@microsoft/fetch-event-source';

3. 正常编写JS业务代码，下面是我的业务代码

import {fetchEventSource} from '@microsoft/fetch-event-source';

const url = 'http://localhost:5000';

document.getElementById('sendRequestBtn').addEventListener('click', function () {

    fetchEventSource(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            prompt: 'hello'
        }),
        openWhenHidden: true,
        async onopen(response) {
            // 处理连接成功的逻辑
            console.log('Connection opened');
        },
        onerror() {
            // 处理连接错误的逻辑
            controller.abort();
            console.log('Connection error');
        },
        onmessage(evt) {
            // 处理接收到消息的逻辑
            console.log('Received message:', evt.data);

            // 在这里处理接收到的消息，例如更新页面等操作
            const parsedData = JSON.parse(evt.data);
            if (parsedData.message && parsedData.message.content && parsedData.message.content.parts) {
                document.getElementById('responseContainer').innerHTML = parsedData.message.content.parts[0];
            }
        },
    });
});

4. 如果直接在HTML页面中引入这个js代码，浏览器运行时就会报错，说import语句非法：

Uncaught SyntaxError: Cannot use import statement outside a module

这是因为浏览器不支持模块的概念，无法通过ES6的import或ES5的require引入模块，解决方法就是使用打包工具将运行时需要的js文件打包。

常用的打包工具：

Webpack： Webpack 是目前最流行的前端打包工具之一，它可以处理 JavaScript、样式表、图片等资源，并且支持模块化开发。

Parcel： Parcel 是一款零配置的打包工具，它可以自动处理依赖关系并打包项目，非常适合快速搭建项目。

Rollup： Rollup 专注于打包 JavaScript 库，它可以将多个模块打包成一个单独的文件，并且支持 Tree Shaking 优化。

Browserify： Browserify 可以让你在浏览器中使用 Node.js 的模块系统，它能够将 CommonJS 模块打包成浏览器可识别的代码。

Grunt： Grunt 是一款任务自动化工具，可以用来进行代码打包、压缩、合并等操作。

Gulp：类似于 Grunt，Gulp 也是一款任务自动化工具，但它采用代码优于配置的方式，让任务定义更加简洁明了。

Brunch： Brunch 是一款快速、简单的前端打包工具，它可以处理 JavaScript、CSS、HTML 等文件，并且支持插件扩展。

5. 选用 Browserify 打包工具

安装：npm install -g browserify

使用：browserify unpacked.js -o packed.js

报错

import { fetchEventSource } from '@microsoft/fetch-event-source';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

错误分析

这个错误是因为您的 JavaScript 文件中使用了 ES6 的模块语法（import），而 Browserify 默认情况下不支持 ES6 的模块语法。要解决这个问题，您可以使用 Babel 来转换您的 JavaScript 文件，使其支持 ES6 模块语法，并将转换后的文件传递给 Browserify 进行打包。

错误解决

首先，确保您已经安装了 Babel 和 Browserify，如果没有安装，可以使用以下命令安装它们：

npm install --save-dev @babel/core @babel/cli @babel/preset-env browserify

在项目根目录下创建一个名为 .babelrc 的文件，并在其中配置 Babel 的转换规则。例如，您可以使用 @babel/preset-env 来转换最新的 JavaScript 特性：

{
  "presets": ["@babel/preset-env"]
}

使用 Babel 来转换您的 JavaScript 文件。假设您的源文件是 chatgpt.js，可以运行以下命令进行转换：

npx babel chatgpt.js --out-file parsed.js

这将会将 chatgpt.js 中的代码转换为支持 ES5 语法的代码，并将转换后的代码保存到 parsed.js 文件中。

最后，使用 Browserify 对转换后的文件进行打包：

browserify parsed.js -o bundle.js

6. 在HTML中引用打包后的bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Backend API</title>
</head>
<body>
<button id="sendRequestBtn">Send POST Request</button>
<div id="responseContainer"></div>

<!-- 加载 fetch-event-source 模块 -->
<script type="module" src="script.js"></script>

这样浏览器就能正常使用引入的模块了

原文链接：https://juejin.cn/post/7350924101941133338 作者：用户716614187816