Installation and build options available for Mirador

The Mirador package can be installed and used in a few different ways. Your approach will vary depending on the customization you need. We usually recommend installing Mirador into a project using npm or yarn.

$ npm install mirador 

# or

$ yarn add mirador

Mirador 3

The dist folder in the installed package contains three different builds of Mirador that are provided with the package:

• mirador.min.js - the main packaged version of mirador using the Universal Module Definition (umd) format. This build is the easiest way to get started with Mirador and supports customization using Mirador settings and theming. It includes all of Mirador’s dependencies and browser compatibility polyfills. However, it is limiting as we cannot use Mirador plugins with this build and JavaScript bundlers will not be able to “treeshake” dependencies using this.
• cjs directory - the CommonJS build for Mirador that includes the Mirador source code transpiled into the CommonJS format. This build can be used with plugins.
• es directory - the “es modules” build for Mirador that includes the Mirador source code. This build can be used with plugins and is the one that we recommend using when integrating Mirador with plugins.

You can see an example of the es modules integration approach at https://github.com/ProjectMirador/mirador-integration using both webpack and parcel.

Mirador 4 (alpha)

In Mirador 4 we use Vite to bundle. After running npm run build, the /dist folder contains two builds:

• CommonJS Build: ./dist/mirador.js (require-based environments)
• ES Module Build: ./dist/mirador.es.js (import-based environments)

You can view the HTML pages contained in __tests__/integration/ for examples of how to pull in the ES Module build of Mirador and integrate plugins and customizations.