Vuejs Library CLI v3 Exclude

Question

I am using vuejs CLI version 3 and am building my library using this target in the package.json

vue-cli-service build --report-json --target lib --name components src/appup-components.js

This library uses lot of other external libraries like bootstrap-vue, axios and handlebars to name a few.

My test program imports this library using npm install.

The library building is painfully slow while building and it takes about 2 mins. Then starting the app server takes another 20-30 secs. The productivity takes a hit.

Questions - Can we exclude the libraries which we import in the test app as well. I have tried in adding to externals under

configureWebpack: {
        externals: {
         }
    }

but it does not compile

• Is there a way to keep compiling library in watch mode. --watch does not let it compile. It stops the compilation after the first time.

Answer 1

The configureWebpack object goes in a vue.config.js file. Then, use a ternary on the NODE_ENV so the dependencies still get injected when you launch your application with npm run serve.

See https://cli.vuejs.org/guide/webpack.html.

const webpack = require("webpack");

function getProdExternals() {
  return {
    axios: "axios",
    lodash: "lodash",
    jquery: "jQuery",
    vue: "Vue"
  };
}

module.exports = {
  configureWebpack: {
    externals: process.env.NODE_ENV === 'production' ?
      getProdExternals() : {}
  }
}