如何在原生HTML/JS项目中通过script标签引入opensea-js

你用的@bthn/opensea-js是第三方fork包，且opensea-js本身依赖Node.js环境模块，直接引入打包文件会因依赖缺失或模块格式不兼容报错，以下是两种可行方案：

方案一：ES模块导入（推荐） #

现代浏览器支持ES模块，可通过jsDelivr直接引入官方包及依赖的ES模块版本，示例代码：

<script type="module">
  // 导入依赖的ethers
  import { ethers } from 'https://cdn.jsdelivr.net/npm/ethers@5.7.2/dist/ethers.esm.min.js';
  // 导入官方opensea-js的ES模块
  import { OpenSeaPort } from 'https://cdn.jsdelivr.net/npm/opensea-js@4.0.1/lib/index.esm.js';

  // 初始化OpenSeaPort
  const provider = new ethers.providers.Web3Provider(window.ethereum);
  const seaport = new OpenSeaPort(provider, {
    networkName: 'mainnet' // 可替换为rinkeby等测试网
  });

  // 调用API示例：获取指定资产
  async function fetchTargetAsset() {
    const asset = await seaport.api.getAsset({
      tokenAddress: '0x...', // 目标合约地址
      tokenId: '123' // 目标Token ID
    });
    console.log(asset);
  }
</script>

注意：需确保浏览器支持ES模块（现代浏览器均支持），且opensea-js版本与ethers版本兼容（如v4版opensea-js依赖ethers v5.x）。

方案二：打包工具预打包（兼容旧浏览器） #

用webpack、rollup等工具将opensea-js及其依赖打包为浏览器可直接引入的UMD文件：

1. 初始化Node.js项目并安装依赖：

   npm init -y
   npm install opensea-js ethers@5
   npm install webpack webpack-cli --save-dev
   

2. 创建入口文件index.js：

   const { OpenSeaPort } = require('opensea-js');
   window.OpenSeaPort = OpenSeaPort;
   

3. 创建webpack配置文件webpack.config.js：

   module.exports = {
     entry: './index.js',
     output: {
       filename: 'opensea-browser.js',
       library: 'OpenSea',
       libraryTarget: 'umd',
       globalObject: 'this'
     }
   };
   

4. 执行打包命令：

   npx webpack --mode production
   

5. 在HTML中引入打包后的文件：

   <script src="./opensea-browser.js"></script>
   <script>
     const provider = new ethers.providers.Web3Provider(window.ethereum);
     const seaport = new OpenSeaPort(provider, { networkName: 'mainnet' });
   </script>
   

直接引入min.js失效的原因 #

opensea-js npm包中的index.min.js是Node.js专用的CommonJS模块格式，浏览器无法直接识别，且未打包依赖的ethers等模块，因此会出现找不到模块的错误。

内容的提问来源于stack exchange，提问作者さとうかつお