Organize + Automate + Deploy = Webpack Chapter 16So, it will output a library that will expose a commonJS interface; this is tailored for non-
browser environments, and you will have to require or import this library to use it. On the
other hand, the second file for the browser has the following output:
output: {
path: './dist',
filename: outputFile + '.browser.js',
library: globalName,
libraryTarget: 'umd',
},A UMD will expose itself in a global scope, no need to import anything, so it's perfect for
the browser because we can include the file in a Vue webpage and use the component
freely. This is also possible, thanks to the index.js auto-install feature:
/* -- Plugin definition & Auto-install -- */
/* You shouldn't have to modify the code below */
// Plugin
const plugin = {
/* eslint-disable no-undef */
version: VERSION,
install,
}
export default plugin
// Auto-install
let GlobalVue = null
if (typeof window !== 'undefined') {
GlobalVue = window.Vue
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue
}
if (GlobalVue) {
GlobalVue.use(plugin)
}What this code is doing is packaging the install function (which registers the component(s)
with Vue) inside the plugin constant and exporting it in the meantime. Then, it checks
whether there is either window or global defined, in that case, it gets hold of the Vue
variable that represents the Vue library and uses the plugin API to install the component(s).