examples/requireJS.html

<meta charset="utf8" />
<html>
<script src='https://requirejs.org/docs/release/2.3.6/minified/require.js'></script>

<script>
  var baseUrl = '../dist'
  require.config({
    baseUrl: baseUrl
  });

  // Options: 'sql-wasm', 'sql-asm', 'sql-asm-memory-growth.js', 'sql-wasm-debug', 'sql-asm-debug'
  require(['sql-wasm'],
    function success(initSqlJs) {
      console.log(typeof initSqlJs);
      if (typeof initSqlJs !== 'function') {
        document.body.style.backgroundColor = 'red';
        console.log('initSqlJs returned: ', initSqlJs);
        alert("Failed to require sql.js through AMD");
        return;
      }
      // The `initSqlJs` function is globally provided by all of the main dist files if loaded in the browser.
      // We must specify this locateFile function if we are loading a wasm file from anywhere other than the current html page's folder.

      var config = {
        locateFile: filename => `${baseUrl}/${filename}`
      }
      initSqlJs(config).then(function (SQL) {
        //Create the database
        var db = new SQL.Database();
        // Run a query without reading the results
        db.run("CREATE TABLE test (col1, col2);");
        // Insert two rows: (1,111) and (2,222)
        db.run("INSERT INTO test VALUES (?,?), (?,?)", [1, 111, 2, 222]);

        // Prepare a statement
        var stmt = db.prepare("SELECT * FROM test WHERE col1 BETWEEN $start AND $end");
        stmt.getAsObject({ $start: 1, $end: 1 }); // {col1:1, col2:111}

        // Bind new values
        stmt.bind({ $start: 1, $end: 2 });
        while (stmt.step()) { //
          var row = stmt.getAsObject();
          // [...] do something with the row of result
          console.log('Here is a row: ', row);
        }
      });
    },
    function error(err) {
      document.body.style.backgroundColor = 'red';
      console.log(err);
      alert("Module load failed: " + err);
    }
  );
</script>

<body>
  Output is in Javscript console
</body>

</html>