Q:

How to use the swagger-ui npm module with an existing OpenAPI specification file

Looking at the documentation for installing Swagger-UI one can see that two official npm modules are being published: swagger-ui and swagger-ui-dist. However, I really struggle to figure out how these are supposed to be used with an already existing OpenApi 3.0 specification.
The only thing I need is a simple web application (plain node.js or express.js or whatever works) which will serve my existing specification.yml document embedded into the plain Swagger-UI files on a path like /docs.
Since this needs to be done in a repeatable manner (will run in a Docker container in the end), manual editing of files is not desired in the process.
The closest I could get was downloading a release tar ball, extracting the dist folder, use tools like sed to replace the default specification file with my own one and finally host this on a webserver like nginx.
However, this looks unnecessary complex to me and makes me wonder what the npm modules are supposed to be used for.

A:

Finally I found two approaches to achieve my goal as outlined in the question.
Using unpkg
unpkg is an automated content delivery network for all modules that are published on the npm registry. It allows to include and use any npm module in a static HTML file without any complex package managers, dependency resolvers etc.  This is especially great if you don't have any other need to use the npm ecosystem directly. 
For swagger-ui, such an HTML file would look like this. Note that we are importing the swagger-ui-dist package which already includes all necessary dependencies.
<!DOCTYPE html>
<!--Inspired by https://gist.github.com/buzztaiki/e243ccc3203f96777e2e8141d4993664-->
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Swagger UI</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist@3/swagger-ui.css" >
  </head>

  <body>
    <div id="swagger-ui"></div>
    <script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"> </script>
    <script type="text/javascript">
      window.onload = function() {
        // Swagger-ui configuration goes here.
        // See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
        SwaggerUIBundle({
          deepLinking: true,
          dom_id: '#swagger-ui',
          showExtensions: true,
          showCommonExtensions: true,
          url: specification.json // <-- adjust this to your webserver's structure
        });
      };
    </script>
  </body>
</html>

Host this HTML file on your webserver and your all settled.
Using browserify / webpack
browserify and webpack are module bundlers from the npm ecosystem that can collect an npm module and all its dependencies, then bundle them up in one single js file. This file can then be loaded and used in an HTML page.
While both tools might differ feature-wise in the details, for this job both of them work almost in the same way. The following example uses browserify, however, the general approach with webpack is the same.
First, install browserify globally:
npm install -g browserify
Then, install the swagger-ui module locally in your current folder:
npm install --save swagger-ui
Finally, bundle the swagger-ui module and all of its dependencies into a single output file:
browserify --require swagger-ui -o bundle.js
The according HTML page to include it could look like this:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./node_modules/swagger-ui/dist/swagger-ui.css">
        <title>Swagger-UI</title>
    </head>
    <body>
        <div id="swagger-ui"></div>
    </body>
    <script type="text/javascript" src="./bundle.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        // Swagger-ui configuration goes here.
        // See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
        SwaggerUI({
          deepLinking: true,
          dom_id: '#swagger-ui',
          showExtensions: true,
          showCommonExtensions: true,
          url: specification.json // <-- adjust this to your webserver's structure
        });
      };
    </script>
</html>

This approach might be preferred if you are using browserify or webpack within your ecosystem for other tasks anyway.

