discord.js/docs/topics/web.md

Web builds

In addition to your usual Node applications, discord.js has special distributions available that are capable of running in web browsers. This is useful for client-side web apps that need to interact with the Discord API. Webpack 3 is used to build these.

Restrictions

• Any voice-related functionality is unavailable, as there is currently no audio encoding/decoding capabilities without external native libraries, which web browsers do not support.
• The ShardingManager cannot be used, since it relies on being able to spawn child processes for shards.
• None of the native optional packages are usable.

Require Library

If you are making your own webpack project, you can require discord.js/browser wherever you need to use discord.js, like so:

const Discord = require('discord.js/browser');
// do something with Discord like you normally would

Webpack File

You can obtain your desired version of discord.js' web build from the webpack branch of the GitHub repository. There is a file for each branch and version of the library, and the ones ending in .min.js are minified to substantially reduce the size of the source code.

Include the file on the page just as you would any other JS library, like so:

<script type="text/javascript" src="discord.VERSION.min.js"></script>

Rather than importing discord.js with require('discord.js'), the entire Discord object is available as a global (on the window) object. The usage of the API isn't any different from using it in Node.js.

Example

<script type="text/javascript" src="discord.11.1.0.min.js"></script>
<script type="text/javascript">
  const client = new Discord.Client();

  client.on('message', msg => {
    const guildTag = msg.channel.type === 'text' ? `[${msg.guild.name}]` : '[DM]';
    const channelTag = msg.channel.type === 'text' ? `[#${msg.channel.name}]` : '';
    console.log(`${guildTag}${channelTag} ${msg.author.tag}: ${msg.content}`);
  });

  client.login('some crazy token');
</script>