about

convert project dependent NPM packages into url

use

import packageNameToPath from 'packagename-to-path'

const packageNamePath = packageNameToPath(
  [
      {
          "name": "vue",
          "global": "Vue",
          "path": (packageinfo) => {
              if (packageinfo && packageinfo.name && packageinfo.version && packageinfo.unpkg) {
                  return `https://unpkg.com/${packageinfo.name}@${packageinfo.version}/${packageinfo.unpkg}`
              }
              return `https://unpkg.com/[email protected]/dist/vue.global.js` 
          }
      },
      {
          "name": "vue-router",
          "global": "VueRouter",
          "path": (packageinfo) => {
              if (packageinfo && packageinfo.name && packageinfo.version && packageinfo.unpkg) {
                  return `https://unpkg.com/${packageinfo.name}@${packageinfo.version}/${packageinfo.unpkg}`
              }
              return `https://unpkg.com/[email protected]/dist/vue-router.global.js` 
          }
      },
      {
          "name": "vue-demi",
          "global": "VueDemi",
          "path": "https://unpkg.com/[email protected]/lib/index.iife.js"
      },
      {
          "name": "pinia",
          "global": "Pinia",
          "path": (packageinfo) => {
              if (packageinfo && packageinfo.name && packageinfo.version && packageinfo.unpkg) {
                  return `https://unpkg.com/${packageinfo.name}@${packageinfo.version}/${packageinfo.unpkg}`
              }
              return `https://unpkg.com/[email protected]/dist/pinia.iife.js` 
          }
      },
      {
          "name": "pinia-plugin-persist",
          "global": "piniaPersist",
          "path": (packageinfo) => {
              if (packageinfo && packageinfo.name && packageinfo.version && packageinfo.unpkg) {
                  return `https://unpkg.com/${packageinfo.name}@${packageinfo.version}/${packageinfo.unpkg}`
              }
              return `https://unpkg.com/[email protected]/dist/pinia-persist.umd.js` 
          }
      },
      {
          "name": "axios",
          "global": "axios",
          "path": (packageinfo) => {
              if (packageinfo && packageinfo.name && packageinfo.version && packageinfo.unpkg) {
                  return `https://unpkg.com/${packageinfo.name}@${packageinfo.version}/${packageinfo.unpkg}`
              }
              return `https://unpkg.com/[email protected]/dist/axios.min.js` 
          }
      },
      {
          "name": "dayjs",
          "global": "dayjs",
          "path": (packageinfo) => {
              if (packageinfo && packageinfo.name && packageinfo.version && packageinfo.unpkg) {
                  return `https://unpkg.com/${packageinfo.name}@${packageinfo.version}/${packageinfo.unpkg}`
              }
              return `https://unpkg.com/[email protected]/dayjs.min.js` 
          }
      },
      {
          "name": "ant-design-vue",
          "global": "antd",
          "path": (packageinfo) => {
              if (packageinfo && packageinfo.name && packageinfo.version && packageinfo.unpkg) {
                  return `https://unpkg.com/${packageinfo.name}@${packageinfo.version}/${packageinfo.unpkg}`
              }
              return `https://unpkg.com/[email protected]/dist/antd.min.js` 
          }
      },
      {
          "name": "ant-design-vue/dist/antd.css",
          "path": (packageinfo) => {
              if (packageinfo && packageinfo.name && packageinfo.version && packageinfo.unpkg) {
                  return `https://unpkg.com/${packageinfo.name}@${packageinfo.version}/dist/antd.css`
              }
              return `https://unpkg.com/[email protected]/dist/antd.css` 
          }
      },
      {
          "name": "lodash",
          "global": "_",
          "path": (packageinfo) => {
              if (packageinfo && packageinfo.name && packageinfo.version && packageinfo.unpkg) {
                  return `https://unpkg.com/${packageinfo.name}@${packageinfo.version}/${packageinfo.unpkg}`
              }
              return `https://unpkg.com/[email protected]/lodash.js` 
          }
      },
      {
          "name": "mathjs",
          "global": "math",
          "path": (packageinfo) => {
              if (packageinfo && packageinfo.name && packageinfo.version && packageinfo.unpkg) {
                  return `https://unpkg.com/${packageinfo.name}@${packageinfo.version}/${packageinfo.unpkg}`
              }
              return `https://unpkg.com/[email protected]/lib/browser/math.js` 
          }
      }
  ]
);

console.log(config);

[
  {
    name: 'vue',
    global: 'Vue',
    path: 'https://unpkg.com/[email protected]/dist/vue.global.js'
  },
  {
    name: 'vue-router',
    global: 'VueRouter',
    path: 'https://unpkg.com/[email protected]/dist/vue-router.global.js'
  },
  {
    name: 'vue-demi',
    global: 'VueDemi',
    path: 'https://unpkg.com/[email protected]/lib/index.iife.js'
  },
  {
    name: 'pinia',
    global: 'Pinia',
    path: 'https://unpkg.com/[email protected]/dist/pinia.iife.js'
  },
  {
    name: 'pinia-plugin-persist',
    global: 'piniaPersist',
    path: 'https://unpkg.com/[email protected]/dist/pinia-persist.umd.js'
  },
  {
    name: 'axios',
    global: 'axios',
    path: 'https://unpkg.com/[email protected]/dist/axios.min.js'
  },
  {
    name: 'dayjs',
    global: 'dayjs',
    path: 'https://unpkg.com/[email protected]/dayjs.min.js'
  },
  {
    name: 'ant-design-vue',
    global: 'antd',
    path: 'https://unpkg.com/[email protected]/dist/antd.min.js'
  },
  {
    name: 'ant-design-vue/dist/antd.css',
    path: 'https://unpkg.com/[email protected]/dist/antd.css'
  },
  {
    name: 'lodash',
    global: '_',
    path: 'https://unpkg.com/[email protected]/lodash.js'
  },
  {
    name: 'mathjs',
    global: 'mathjs',
    path: 'https://unpkg.com/[email protected]/lib/browser/math.js'
  }
]

example

vite.config.ts

  import injectExternals from 'vite-plugin-inject-externals'
  import packageNameToPath from 'packagename-to-path'

  {
    plugins: [
      // ...
      injectExternals({
        modules: config
      })
    ],
  }