Sitemap Diff

sitemap-diff is an NPM package for comparing two sitemap.xml files. sitemap-diff is both a library and an CLI (command line interface)

TypeScript

As a library, should use TypeScript for typing.

For convenience, install Typescript globally npm install -g typescript. TypeScript Options Documentation

Vanilla Rollup Project

Following this tutorial It shows the plugins

1. postcss from rollup-plugin-postcss - Allows importing and bundling CSS (and preprocessors like SCSS)
2. serve from rollup-plugin-serve - Starts a local dev server
3. livereload from rollup-plugin-livereload - Enables live-reloading in the browser on changes
4. url from @rollup/plugin-url - Handles importing image and other binary files
5. terser from @rollup/plugin-terser - Handles minification to make the bundle smaller

Here is a rollup.config.js with this plugins enabled.

import typescript from '@rollup/plugin-typescript';  // Compiles TypeScript files
import postcss from 'rollup-plugin-postcss';         // Allows importing and bundling CSS (and preprocessors like SCSS)
import serve from 'rollup-plugin-serve';             // Starts a local dev server
import livereload from 'rollup-plugin-livereload';   // Enables live-reloading in the browser on changes
import url from '@rollup/plugin-url';                // Handles importing image and other binary files
import terser from '@rollup/plugin-terser';          // Handles minification to make the bundle smaller


// Check if we're in development mode (watch mode or explicitly set build mode)
const isDev = process.env.ROLLUP_WATCH === 'true' || process.env.BUILD_MODE === 'dev';

export default {
  input: 'src/index.ts',               // Entry point for the bundle (main TypeScript file)
  output: {
    file: 'dist/index.js',             // Output file location and name
    format: 'esm',                     // Output format: ES module
    sourcemap: true                    // Generate sourcemaps for easier debugging
  },
  plugins: [
    postcss(),                         // Process and bundle imported CSS files
    terser(),                          // Use terser for minification to make the bundle smaller
    url({
      limit: 0,                        // Always copy files instead of embedding them as base64 (since limit is 0)
      include: ['**/*.png'],           // Include these file types
      destDir: 'dist/assets'           // Destination folder for copied assets
    }),
    typescript({
      tsconfig: './tsconfig.json'      // Use this tsconfig file to configure TypeScript compilation
    }),
    ...(isDev ? [                      // Development-only plugins (enabled when in dev mode)
      serve({
        open: true,                    // Automatically open the browser when the server starts
        contentBase: ['dist', 'src'],  // Folders to serve static files from
        port: 8080                     // Port to run the dev server on
      }),
      livereload('dist')               // Watch the 'dist' directory and reload browser on changes
    ] : [])
  ]
};

6a. Using TypeScript as a Bundler

Using TypeScript to precompile into a JavaScript also makes it for bundling instead of Rollup. It also offers the feature of making your package more suitable for front-end tree shaking. To do this.

1. Remove all rollup packages and configurations
2. Update package.json

{
  "type": "module",
  "main": "lib/cjs/index.js",
  "exports": {
    "import": {
      "default": "./lib/esm/index.js",
      "types": "./lib/types/index.d.ts"
    },
    "require": {
      "default": "./lib/cjs/index.js",
      "types": "./lib/types/index.d.ts"
    }
  },
  "sideEffects": false,
  "files": [
    "lib"
  ],
  "scripts": {
    "build": "rimraf ./lib && tsc --skipLibCheck --project tsconfig.esm.json && tsc --skipLibCheck --project tsconfig.cjs.json",
    "release-package": "npm run build && npx changeset publish"
  },
  "devDependencies": {
    "rimraf": "^6.0.1",
  }
}

2. Add two specific TypeScript config files for esm and cjs outputs.

tsconfig.esm.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "esnext",
    "outDir": "./lib/esm",
  },
  "include": [ "src/**/*" ],
  "exclude": [ "node_modules", "lib"]
}

tsconfig.cjs.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "./lib/cjs",
  },
  "include": [ "src/**/*" ],
  "exclude": [ "node_modules", "lib"]
}