index.html — vite Source File

Source Code

<h1>Alias</h1>

<p class="fs"></p>
<p class="fs-dir"></p>
<p class="regex"></p>
<p class="dep"></p>
<p class="from-script-src"></p>
<p class="url-conflict"></p>
<p class="aliased-module"></p>
<p class="custom-resolver"></p>

<div class="optimized"></div>

<script type="module">
  // no node: protocol intentionally
  import { msg as fsMsg } from 'fs'
  import { msg as fsDirMsg } from 'fs-dir/test'
  import { msg as regexMsg } from 'regex/test'
  import { msg as depMsg } from 'dep'
  import { msg as moduleMsg } from 'aliased-module/index.js'
  import { msg as urlConflictMsg } from '//url_conflict.js'
  import { msg as customResolverMsg } from 'custom-resolver'

  function text(el, text) {
    document.querySelector(el).textContent = text
  }

  text('.fs', fsMsg)
  text('.fs-dir', fsDirMsg)
  text('.regex', regexMsg + ' via regex')
  text('.dep', depMsg)
  text('.aliased-module', moduleMsg)
  text('.url-conflict', urlConflictMsg)
  text('.custom-resolver', customResolverMsg)

  import { createApp } from 'vue'
  import { ref } from 'foo'
  // vue is aliased to the full browser build AND optimized.
  // should resolve as expected
  createApp({
    template: '[{{ msg }}] alias optimized dep',
    setup() {
      return {
        msg: ref('success'),
      }
    },
  }).mount('.optimized')

  // aliased to an absolute URL in CJS, should be optimized
  import { isFunction } from '@vue/shared'
  // also check name clash for aliased deps
  export { isFunction } from '@vue/shared'
  console.log(isFunction(() => {}))
</script>

<script type="module" src="/@/from-script-src.js"></script>
<link rel="stylesheet" href="/@/test.css" />