Vue-build-helper NPM

Streamline the Vue CLI 3 build process.

The Vue CLI 3 is an awesome tool. The build process is not completely smooth when you have multiple components or are testing the component locally using link with npm or yarn. This module provides the following features.

It removes the (irritating) demo.html files that are useless.
It generates an index file with named exports for all components.
It disables eslint for the components to avoid an avalanche of errors and warnings when testing the component in another project using link with npm or yarn.

These functionalities can be run all together or separately.

Installation

Global

Install as a globally available CLI tool using npm:

npm install --global vue-build-helper

Or install using yarn:

yarn gloabl add vue-build-helper

Local

Install as a devDependency using npm:

npm install --save-dev vue-build-helper

Or install using yarn:

yarn add --dev vue-build-helper

The following entry will be added to the devDependencies section in the package.json file.

{
  "devDependencies": {
    "vue-build-helper": ^0.1.11
  }
}

Add the following entry to the scripts section in the package.json file:

{
  "scripts": {
    "build-helper": "vue-build-helper"
  }
}

Now you can run npm run build-helper from the command line. You can pass it arguments using double dashes (--), e.g. npm run build-helper -- info.

Go to Table of Contents

Usage

Minimum configuration

The easiest way to use this module is adding it as a postbuild script in the package.json file. The following shows how to run all features when the build process has completed successfully. The vue-build-helper uses sane defaults, if no options are specified it assumes dist as default destination for the build directory.

{
  "scripts": {
    "build": "vue-build-helper.js-helper.js",
    "postbuild": "vue-build-helper all"
  }
}

You can also call it directly by executing one of the following commands.

npm run postbuild

Or:

yarn postbuild

Go to Table of Contents

Additional configuration

Running features individually

Features can be run individually by specifying one of the following commands: eslint-disable, delete-demo-html, create-exports.

Example calling the eslint-disable feature for a specific file. Keep in mind that the file is always relative to the build destination directory (default dist).

{
  "scripts": {
    "postbuild": "vue-build-helper eslint-disable --file TestPlugin/TestPlugin.common.js"
  }
}

Specifying alternative build directory

All commands accept the --dest option so that you can specify a different build directory than the default dist directory. Keep in mind that the build destination directory is always relative to the current working directory.

Example setting the destination build directory to build.

{
  "scripts": {
    "postbuild": "vue-build-helper all --dist build"
  }
}

Go to Table of Contents

Other options

--help: Using npm run build-helper -- --help will list the available commands.
\<command> --help: Using npm run build-helper -- <command> --help will display information about the specified command and its options.
info: Using npm run build-helper -- info will display information about your operating system and other environment information that is useful if you need to submit an issue.

Go to Table of Contents

Roadmap

Currently there is nothing on the roadmap. Suggestions? Please submit an issue.

Go to Table of Contents

Contributing

We welcome pull requests! What follows is the simplified version of the contribution process, please read here to fully understand our contribution policy and here to understand our code of conduct.

Fork the repository here!
Create your feature branch: git checkout -b my-new-feature
If relevant, don't forget to add your tests
Commit your changes: npm run commit
Push to the branch: git push origin my-new-feature
Submit a pull request :-)

Go to Table of Contents