Web3.js - where to find prepackaged bundle to be included with my HTML page

Question

Is there any way i can download web3.min.js and include "" in my html directly, without using npm to install, just like adding a js file, i know there is 0.20 version but i cannot find the version of 1.0 for web3

Answer 1

Version 1.0.0.beta-37 is the last one with bundled JS for web pages. If you want to use it go to the web3js GitHub page and select the version tag from the branches and tags dropdown or here is a direct link: https://github.com/ethereum/web3.js/tree/v1.0.0-beta.37

The official explanation of the web3.js maintainer is:

We will no longer provide a minified full bundle in the NPM package. It's required to bundle your javascript code with Webpack. This because of performance and security reasons.

If you want to use the latest version of the library you have to bundle it yourself. Here is a step by step guide:

1. Installing webpack babel and the other dependencies:

   npm i -g webpack webpack-cli babel-core@6 babel-loader@7 @babel/transform-runtime @babel/plugin-transform-runtime babel-preset-env truffle-solidity-loader json-loader
   

2. Install the web3 npm package - npm i -g web3

3. Create a dist folder web3 directory in your node_modules folder and Javascript file in it, for example dapp.js, consisting the following line (replace the path with your web3 folder in the node modules directory:

   window.Web3 = require('C:/Users/Username/AppData/Roaming/npm/node_modules/web3/');
   

   Because we need our Web3 class exposed as a global one

4. Create a webpack config file in the web3 directory in your node_modules folder and configure it like this:

   const path = require('path')
   module.exports = {
   // The JS file with the exposed global web3 object
   entry: './dist/dapp.js',
   output: {
       // What you want your bundled JS file to be 
       filename: 'web3.min.js',
       path: path.resolve(__dirname, 'app/dist')
   },
   mode: 'production',
   resolveLoader: {
       // Your node_modules directory
       modules: ['C:/Users/Username/AppData/Roaming/npm/node_modules']
   },
   resolve: {
       extensions: ['.js', '.json',],
   
   },
   module: {
   
       rules: [
           {
               test: /\.js$/,
               exclude: [/node_modules/],
               use: {
                   loader: 'babel-loader',
                   options: {
                       plugins: ['@babel/transform-runtime']
                   }
               }
           }
       ],
   },
   

   }

5. Create a .babelrc configuration file in the same web3 directory:

   {
     "presets": ["@babel/env"],
     "plugins": ["@babel/plugin-transform-runtime"]
   }
   

6. Run webpack command from the command line (while in the web3 directory)

I write this by memory, I may be missing something but overall this is roughly what you have to do to bundle your own web ready web3.js dist file.

Answer 2

web3.min.js and the entire dist folder was removed from 1.0, so you will need to create one yourself