Replace import syntax for Vanilla JS such as - import { Token, TOKEN_PROGRAM_ID } from "@solana/spl-token";

Question

I'm new to JS ES stuff and Solana. I'm trying to transfer SPL token from one wallet to another. I've seen almost all SOL tutorials using imports like:

import { Token, TOKEN_PROGRAM_ID } from "@solana/spl-token";

But I'm using Vanilla JS. So I'm using JS file like:

<script src="https://unpkg.com/@solana/web3.js@latest/lib/index.iife.min.js"><script>

I saw the answer that shows how to do SPL transfer. But how could I replace whatever that is inside the import like Token, TOKEN_PROGRAM_ID to work in my Vanilla JS. Below is the code I want to use taken from other answer.

import { Token, TOKEN_PROGRAM_ID } from "@solana/spl-token";
import { web3, Wallet } from "@project-serum/anchor";

async function transfer(tokenMintAddress: string, wallet: Wallet, to: string, connection: web3.Connection, amount: number) {
  const mintPublicKey = new web3.PublicKey(tokenMintAddress);    
  const mintToken = new Token(
    connection,
    mintPublicKey,
    TOKEN_PROGRAM_ID,
    wallet.payer // the wallet owner will pay to transfer and to create recipients associated token account if it does not yet exist.
  );
        
  const fromTokenAccount = await mintToken.getOrCreateAssociatedAccountInfo(
    wallet.publicKey
  );

  const destPublicKey = new web3.PublicKey(to);

  // Get the derived address of the destination wallet which will hold the custom token
  const associatedDestinationTokenAddr = await Token.getAssociatedTokenAddress(
    mintToken.associatedProgramId,
    mintToken.programId,
    mintPublicKey,
    destPublicKey
  );

  const receiverAccount = await connection.getAccountInfo(associatedDestinationTokenAddr);
        
  const instructions: web3.TransactionInstruction[] = [];  

  if (receiverAccount === null) {

    instructions.push(
      Token.createAssociatedTokenAccountInstruction(
        mintToken.associatedProgramId,
        mintToken.programId,
        mintPublicKey,
        associatedDestinationTokenAddr,
        destPublicKey,
        wallet.publicKey
      )
    )

  }
  
  instructions.push(
    Token.createTransferInstruction(
      TOKEN_PROGRAM_ID,
      fromTokenAccount.address,
      associatedDestinationTokenAddr,
      wallet.publicKey,
      [],
      amount
    )
  );

  const transaction = new web3.Transaction().add(...instructions);
  transaction.feePayer = wallet.publicKey;
  transaction.recentBlockhash = (await connection.getRecentBlockhash()).blockhash;
  
  const transactionSignature = await connection.sendRawTransaction(
    transaction.serialize(),
    { skipPreflight: true }
  );

  await connection.confirmTransaction(transactionSignature);
}

Answer 1

The <script> tag you are using is for solana web3 and you'll get solanaWeb3 on browser window and not spl-token. Because bundler exposes that while the javascript bundle is generated. You can access web3 methods and properties using window.solanaWeb3

<script src="https://unpkg.com/@solana/web3.js@latest/lib/index.iife.min.js"></script> 
console.log(window.solanaWeb3.sendAndConfirmTransaction); 

But for the "@solana/spl-token" package, the bundler is not exposing a global variable to use it on browser Github issue, so unfortunately you can't use it on browser using the script bundle approach.

I'd suggest using NPM you do that.