Allow devServer to serve a named library on the window object

[adriaanmeuris]

What problem does this feature solve?

CLI service serve does not allow to serve libraries which expose their default export on the window object. CLI service build does:

I'm successfully building a library with a .js file as entry, which exposes the default export to the window object (umd build):
vue-cli-service build --target lib --name mylibrary

The library is availabe as window.mylibrarywhen loading the library in a script tag.

However, this is not possible when working with the devServer, as only the build command accepts the options target and name.

What does the proposed API look like?

vue-cli-service serve --target lib --name mylibrary

The library would would be available to the window object when loaded as a script tag in the devServer page (assuming we're serving a UMD-build)

I currently achieve this by manually adding the library to the window object in code.
Any guidance on how to achieve would be very much appreciated.

[adriaanmeuris]

Had a look at the configuration of the devServer. It looks this is possible by adding the library name to the webpack configuration in vue.config.js:

module.exports = {
  configureWebpack: {
    output: {
      library: 'mylibrary', // Add this line to expose the library in the devServer
      libraryExport: 'default',
    }
  },
};

Will keep this issue open as I see 2 possible improvements:

• add this to the documentation, or
• add options target and name to vue-cli-service serve which passes these to the devServer

[LinusBorg]

So just to make sure I understand the requirement:

You want to build and serve the UMD build of your plugin via the dev server that's created by vue-cli-service serve, and consume it in some other application to test it there?

Or what's the use case?

I'm asking as I have written a couple of libs with vue-cli so far and personally never have done anything of that sort, nor have I came across the need for it, so I would like to understand.

[adriaanmeuris]

Exactly - the library exposes some methods which can be called by the website that embeds it.

Let's say for example window.mylibrary.paint() would set the background-color of the parent page to red.

Having this library available on the window object with the devServer allows to:

• implement the paint method while seeing changes directly in the browser while developing
• write e2e tests which can automatically trigger these methods in the browser and validate their results (background is red)

[alonsohki]

Had a look at the configuration of the devServer. It looks this is possible by adding the library name to the webpack configuration in vue.config.js:

module.exports = {
  configureWebpack: {
    output: {
      library: 'mylibrary', // Add this line to expose the library in the devServer
      libraryExport: 'default',
    }
  },
};

Will keep this issue open as I see 2 possible improvements:

• add this to the documentation, or
• add options target and name to vue-cli-service serve which passes these to the devServer

Can you give more information of how you got this to work? How do you include the library into the main app to take advantage of the HMR? And how do you reference it?

[ashley00101010]

any updates on this one?

Now we use => "dev": "vue-cli-service build ./src/vue/lib.index.js --target lib --mode production --watch"

This works but is very slow on every change/recompiling