@theforeman/vendor

foreman supported 3rd-party node_modules

What you get with this project

• bundled 3rd-party dependencies
• variables.scss
• mixins.scss

Installation

npm install --save @theforeman/vendor

Add the ForemanVendorPlugin to your webpack plugins:

// webpack.config.js
const ForemanVendorPlugin = require('@theforeman/vendor');

module.exports = {
  entry: { ... },
  output: { ... },
  module: { ... },
  plugins: [
    new ForemanVendorPlugin({ mode: 'production' }),
    ...
  ],
};

ForemanVendorPlugin options

attribute | default value | description ----------|---------------|--------------------------------------------- mode | production | Can be set to development or production so the plugin will use the correct version of the provided 3rd-parties.

Stylesheets

@theforeman/vendor based on patternfly-react. It build the patternfly-react partials into the ./dist/foreman-vendor.bundle.css and provides their variables and mixins sets to reuse.

@import "~@theforeman/vendor/scss/variables";
@import "~@theforeman/vendor/scss/mixins";

Development enviorment

See @theforeman/vendor-dev for development installation.

Building

This project use webpack to produce development and production versions of bundled javascript and css files together with a manifest.json and a webpack-plugin to use by the consumer. To build them into the ./dist folder, run:

# build bundled production, development, webpack-plugin, scss and docs
npm run build
# build bundled production and development
npm run build:bundle
# build bundled  production
npm run build:bundle:prod
# build bundled  development
npm run build:bundle:dev
# build the webpack-plugin
npm run build:plugin
# build the scss files
npm run build:scss
# build docs
npm run build:docs
# build docs analyze html report
npm run build:docs:analyze
# build docs about scss
npm run build:docs:scss

Running npm run build will produce ./dist, ./scss and ./docs folders with the following files:

packages/vendor/dist
├── foreman-vendor.bundle-[version]-development-[hash].css
├── foreman-vendor.bundle-[version]-development-[hash].css.gz
├── foreman-vendor.bundle-[version]-development-[hash].css.map
├── foreman-vendor.bundle-[version]-development-[hash].css.map.gz
├── foreman-vendor.bundle-[version]-development-[hash].js
├── foreman-vendor.bundle-[version]-development-[hash].js.gz
├── foreman-vendor.bundle-[version]-development-[hash].js.map
├── foreman-vendor.bundle-[version]-development-[hash].js.map.gz
├── foreman-vendor.bundle-[version]-production-[hash].css
├── foreman-vendor.bundle-[version]-production-[hash].css.gz
├── foreman-vendor.bundle-[version]-production-[hash].css.map
├── foreman-vendor.bundle-[version]-production-[hash].css.map.gz
├── foreman-vendor.bundle-[version]-production-[hash].js
├── foreman-vendor.bundle-[version]-production-[hash].js.gz
├── foreman-vendor.bundle-[version]-production-[hash].js.map
├── foreman-vendor.bundle-[version]-production-[hash].js.map.gz
├── manifest.development.json
├── manifest.development.json.gz
├── manifest.production.json
├── manifest.production.json.gz
└── vendor-webpack-plugin.js

0 directories, 21 files

packages/vendor/docs
├── scss
│   ├── mixins.scss
│   └── variables.scss
├── stats.development.html
└── stats.production.html

1 directory, 4 files

packages/vendor/scss
├── mixins.scss
└── variables.scss

0 directories, 2 files

Code Linting

This project uses eslint with patternfly-react:recommended rules, to lint your code run:

npm run lint

Contributing

Please checkout the contributing.md, the roadmap.md and the open issues.