build

This CLI script compiles and bundles the code using Rollup or Webpack.

It is important to define the following files at plugin's metadata:

You can learn more about plugins metadata here.

Important: This script is intended to work running from the directory where the source code is (e.g., a plugin's folder). And, by default, compiling an index.js in that same folder unless a different input option is specified.

The recommendation is to use this script as an npm script inside the package.json of the code you'd like to build (e.g., a plugin's package.json).

Copy

devkit-scripts build

Options

Copy

-c, --config [filename]        use this config file (if argument is used but value is unspecified,
                               defaults to rollup.config.js or webpack.config.js)

-f, --formats <formats>        type or types of output (amd, cjs, esm, iife, umd, umd.min),
                               comma separated (default: ["umd","umd.min"])

--input <file>                 sets the entry input point to be compiled (default: "index.js")

--env, --environment <values>  passes additional settings to the config file via process.ENV
                               (e.g. --environment INCLUDE_DEPS,BUILD:production)

-w, --watch                    watch files in bundle and rebuild on changes

--no-clean                     avoids cleaning the output directory before building the bundles.

--node                         builds for Node.js instead of browser

--size-snapshot                provides details about: actual bundle size, minified bundle size and
                               gzipped bundle size. (Only rollup)

--bundler <bundler>            chooses the bundler to use. Options "rollup", "webpack". (default: "rollup")

-h, --help                     display help for command

API usage

The script can be used programmatically too using similar options as the CLI.

Copy

const { build } = require('@pos-web/devkit-scripts');

build({
  config: (String|Boolean)?,
  formats: String?,
  input: String?
  environment: String?,
  watch: Boolean?,
  clean: Boolean?,
  node: Boolean?,
  sizeSnapshot: Boolean?,
  bundler: ('rollup' | 'webpack')?,
});

Extending configuration

It is possible to extend or overwrite the built-in configuration of the module bundler (webpack or rollup) by using the config option or by having a rollup.config.js or a webpack.config.js at the folder from where the script will be executed.

Example extending webpack configuration:

package.json

Copy

{
  "name": "@pos-web/devkit-plugin-shared-components-demo",
  "version": "0.11.13",
  "description": "This plugin includes the UI Components which are used among all the Demo Application.",
  "license": "SEE LICENSE IN LICENSE.md",
  "main": "./dist/@pos-web/devkit-plugin-shared-components-demo.umd.js",
  "browser": "./dist/@pos-web/devkit-plugin-shared-components-demo.umd.min.js",
  "private": true,
  "files": ["dist"],
  "scripts": {
    "build": "devkit-scripts build --bundler webpack",
    "build:dev": "devkit-scripts build --bundler webpack --formats umd",
    "build:prod": "devkit-scripts build --bundler webpack --formats umd.min"
  },
  "dependencies": {
    "antd": "3.26.12",
    "react-json-view": "1.19.1"
  },
  "devDependencies": {
    "@pos-web/devkit-scripts": "2.0.0",
    "concurrently": "5.1.0",
    "cross-env": "7.0.2",
    "css-loader": "3.4.2",
    "less": "3.11.1",
    "less-loader": "5.0.0",
    "lodash.camelcase": "4.3.0",
    "rimraf": "3.0.2",
    "style-loader": "1.1.3",
    "webpack-merge": "4.2.2"
  },
  "peerDependencies": {
    "classnames": "^2.0.0",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-is": "^16.8.0"
  },
  "externalDependencies": {
    "classnames": {
      "global": "classNames"
    },
    "react": {
      "global": "React"
    },
    "react-dom": {
      "global": "ReactDOM"
    },
    "react-is": {
      "global": "ReactIs"
    }
  },
  "priority": 90
}

webpack.config.js

Copy

const merge = require('webpack-merge');
const config = require('@pos-web/devkit-scripts/config/webpack.config');

module.exports = merge(config, {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'less-loader',
            options: { javascriptEnabled: true },
          },
        ],
      },
    ],
  },
});

Babel configuration

By default the script uses the built-in babel config. If you'd like to use a different configuration, you can create a configuration file in the same directory where this script will be executed.

Other option is to use a custom rollup or webpack configuration instead of the built-in one.