How do I bundle vue with esbuild? | SpeakJS | Page 1

hidden torrent Oct 13, 2023, 11:50 AM

#

also tried

<script type="module">
    import { Vue } from 'vue';
    console.log(Vue)
</script>```

results in:
```Uncaught TypeError: The specifier “vue” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.```

long roost Oct 13, 2023, 1:45 PM

#

Why not use the official vue installation guide
It uses vite which is based on esbuild

hidden torrent Oct 14, 2023, 12:48 AM

#

long roost Why not use the official vue installation guide It uses vite which is based on e...

through using an import map?

<script type="importmap">
  {
    "imports": {
      "vue": "LINK TO MY OWN MIN.JS"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

If I have multiple imports in my min.js how do I show that in imports?

"imports": {
      "vue": "LINK TO MY OWN MIN.JS",
      "another_library": "LINK TO MY OWN MIN.JS",
      "a_third_library": "LINK TO MY OWN MIN.JS",
}

Is this what you mean by using the offical guide?

long roost Oct 14, 2023, 12:49 AM

#

no import map

#

it bundles your whole code including vue and any other libraries

hidden torrent Oct 14, 2023, 12:50 AM

#

Where in the guide should I be looking?

#

all I see is
import { createApp } from 'vue' which is what I'm doing

#

I don't get why they don't give an example

#

I don't even understand vite, it's insane I've been 4 days trying to install vue. Working with a cdn is fine, vue gets added to the global scope no problem, minimizing my own js file with esbuild and requiring it has had me banging my head against a wall for 4 days

#

// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: resolve(__dirname, 'lib/main.js'),
      name: 'MyLib',
      // the proper extensions will be added
      fileName: 'my-lib',
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['vue'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})```

How am I meant to work this out this is insane

#

I want to install 1 library. add 1 library to global scope. use libary. that's it. And I get hit with "just read 50 thousand words on the vite website bro" "just read 60 thousand words on vue website"

#


Projects scaffolded via create-vue (based on Vite) or Vue CLI (based on webpack) are pre-configured for production builds.

If using a custom setup, make sure that:

    vue resolves to vue.runtime.esm-bundler.js.
    The compile time feature flags are properly configured.
    process.env.NODE_ENV is replaced with "production" during build.```

Wow, this is useless

long roost Oct 14, 2023, 12:57 AM

#

why does it have to be global

hidden torrent Oct 14, 2023, 12:57 AM

#

i don't know

#

I asked this question on another page and someone was saying

Because you never provide vue on the global scope

#

don't know if you have access to this https://discord.com/channels/434487340535382016/1162210473291288576

#

🤪

#

🤪

#

🤪

long roost Oct 14, 2023, 1:03 AM

#

https://cdn.discordapp.com/emojis/678693845369749535.png?size=48

hidden torrent Oct 14, 2023, 1:03 AM

#

long roost https://cdn.discordapp.com/emojis/678693845369749535.png?size=48

what

long roost Oct 14, 2023, 1:04 AM

#

you either use a cdn and its globally available
or a bundler handles the imports for you and its not global

#

rn ur doing some weird mix of the 2

hidden torrent Oct 14, 2023, 1:05 AM

#

long roost rn ur doing some weird mix of the 2

ok

#

how does a bundler handle the imports?

#

where should I be looking in vite documentation

#

Building for production just says:

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      // https://rollupjs.org/configuration-options/
    },
  },
})```

is this the most useless example I've ever seen in my life

long roost Oct 14, 2023, 1:09 AM

#

you dont have to set up everything manually btw
https://vuejs.org/guide/quick-start.html#creating-a-vue-application
run this single command and it generates a working project boilerplate you can edit

Quick Start | Vue.js

Vue.js - The Progressive JavaScript Framework

hidden torrent Oct 14, 2023, 1:10 AM

#

long roost you dont have to set up everything manually btw https://vuejs.org/guide/quick-st...

so now we're using two servers?

long roost Oct 14, 2023, 1:10 AM

#

?

hidden torrent Oct 14, 2023, 1:10 AM

#

a backend and a front end server?

long roost Oct 14, 2023, 1:11 AM

#

thats just frontend

hidden torrent Oct 14, 2023, 1:11 AM

#

well I have a backend already

long roost Oct 14, 2023, 1:11 AM

#

you can host it on the same or separate server as the backend

hidden torrent Oct 14, 2023, 1:11 AM

#

my understanding

#

you have a backend like rails

#

rails bundles a front end framework like vue

#

rails serves vue to the client

#

the client uses vue

#

Now some people are saying no

#

You have a backend that is pure api

long roost Oct 14, 2023, 1:12 AM

#

rails doesnt bundle

hidden torrent Oct 14, 2023, 1:12 AM

#

it does something

long roost Oct 14, 2023, 1:12 AM

#

you bundle once and it serves these files

hidden torrent Oct 14, 2023, 1:12 AM

#

yeah

#

Ok I think it's vite but it's a rails command

#

now that's my understanding

#

that makes sense to me

#

but now you're saying run two servers, run npm run dev

long roost Oct 14, 2023, 1:15 AM

#

thats only for development

#

for prod you run npm run build and the only server is rails

hidden torrent Oct 14, 2023, 1:17 AM

#

ok

#

well at least that makes sense

#

//app.jsx
import * as Vue from 'vue'
console.log(Vue)

So should I put all my vue code in here and bundle it when ready for production?

long roost Oct 14, 2023, 1:22 AM

#

yes

hidden torrent Oct 14, 2023, 1:22 AM

#

ok

#

ok

#

my mistake is thinking I'd bundle all my libraries

#

and then import those bundled libraries into my own script and start front end development

#

but I should develop in a npm front end server and bundle everything when ready for production, libraries and my code

#

If I didn't want to develop in a front end server, let's say I have a database and rails backend all ready and want to develop using these routes and data, could I just require vue directly from node_modules/vue instead of the vue cdn?

#

I think that's how it's done if I want to develop front end code with the backend server

#

require directly from node_modules

long roost Oct 14, 2023, 1:36 AM

#

so for development there are basically these ways:

(awful): rebuild frontend after each edit and let the backend serve it
https://vitejs.dev/config/server-options.html#server-proxy and run npm run dev to get hot reloading etc. all requests starting with e.g. /api/ will be sent to the backend (running on a different url)

hidden torrent Oct 22, 2023, 4:33 PM

#

Sorry to ressurect a dead thread

#How do I bundle vue with esbuild?