@bem-react/pack ·

A tool for building and prepare components for publishing.

✈️ Install

via npm:

npm i -DE @bem-react/pack

via yarn:

yarn add -D @bem-react/pack

☄️ Usage

Runs components build with defined plugins.

USAGE
  $ pack build

OPTIONS
  -c, --config=config  [default: build.config.json] The path to a build config file.

⚙️ Configuration

An example configuration:

const { resolve } = require('path')
const { useCleanUpPlugin } = require('@bem-react/pack/lib/plugins/CleanUpPlugin')
const { useCopyAssetsPlugin } = require('@bem-react/pack/lib/plugins/CopyAssetsPlugin')
const { useCssPlugin } = require('@bem-react/pack/lib/plugins/CssPlugin')
const { useTypeScriptPlugin } = require('@bem-react/pack/lib/plugins/TypescriptPlugin')

/**
 * @type {import('@bem-react/pack/lib/interfaces').Config}
 */
module.exports = {
  context: resolve(__dirname, '..'),

  output: './dist',

  plugins: [
    useCleanUpPlugin(['./dist']),

    useTypeScriptPlugin({
      configPath: './tsconfig.prod.json',
    }),

    useCssPlugin({
      context: './src',
      src: './**/*.css',
      output: ['./dist', './dist/esm'],
    }),

    useCopyAssetsPlugin([
      {
        context: './src',
        src: './**/*.{svg,md,json}',
        output: ['./dist', './dist/esm'],
      },
    ]),
  ],
}

Declaration

type Config = {
  /**
   * Executing context.
   *
   * @default cwd
   */
  context?: string

  /**
   * Output directory.
   */
  output: string

  /**
   * Plugins list.
   */
  plugins: Plugin[]
}

🛠 Plugins

CleanUpPlugin

Plugin for cleanuping directories. (Run at beforeRun step).

Usage

const { useCleanUpPlugin } = require('@bem-react/pack/lib/plugins/CleanUpPlugin')

useCleanUpPlugin(['./dist'])

Declaration

/**
 * A list of directories which need to be cleaned.
 */
type Sources = string[]

export declare function useCleanUpPlugin(sources: Sources): CleanUpPlugin

CopyAssetsPlugin

Plugin for copying assets. (Run at afterRun step).

Usage

const { useCopyAssetsPlugin } = require('@bem-react/pack/lib/plugins/CopyAssetsPlugin')

useCopyAssetsPlugin([
  {
    context: './src',
    src: './**/*.{svg,md,json}',
    output: ['./dist', './dist/esm'],
  },
])

Declaration

type Rule = {
  /**
   * Glob or path from where we сopy files.
   */
  src: string

  /**
   * Output paths.
   */
  output: string[]

  /**
   * A path that determines how to interpret the `src` path.
   */
  context?: string

  /**
   * Paths to files that will be ignored when copying.
   */
  ignore?: string[]
}

type Rules = Rule | Rule[]

function useCopyAssetsPlugin(rules: Rules): CopyAssetsPlugin

CssPlugin

A plugin that copies css files and makes processing using postcss on demand. (Run at run step).

Usage

const { useCssPlugin } = require('@bem-react/pack/lib/plugins/CssPlugin')

useCssPlugin({
  context: './src',
  src: './**/*.css',
})

Declaration

type Options = {
  /**
   * A path that determines how to interpret the `src` path.
   */
  context?: string
  /**
   * Glob or path from where we сopy files.
   */
  src: string
  /**
   * Output paths.
   */
  output: string[]
  /**
   * Paths to files that will be ignored when copying and processing.
   */
  ignore?: string[]
  /**
   * A path to postcss config.
   */
  postcssConfigPath?: string
}

export declare function useCssPlugin(options: Options): CssPlugin

TypescriptPlugin

A plugin that process ts and creates two copies of the build (cjs and esm). (Run at run step).

Usage

const { useTypeScriptPlugin } = require('@bem-react/pack/lib/plugins/TypescriptPlugin')

useTypeScriptPlugin({
  configPath: './tsconfig.prod.json',
})

Declaration

type Options = {
  /**
   * A path to typescript config.
   */
  configPath?: string

  /**
   * A callback for when creating side effects.
   */
  onCreateSideEffects: (path: string) => string[] | boolean | undefined
}

function useTypeScriptPlugin(options: Options): TypeScriptPlugin

PackageJsonPlugin

A plugin that copy package.json and modify content. (Run at onFinish step).

Usage

const { usePackageJsonPlugin } = require('@bem-react/pack/lib/plugins/PackageJsonPlugin')

usePackageJsonPlugin({
  scripts: {},
})

🏗 Write own plugin

The plugin can perform an action on one of the available hook onBeforeRun, onRun and onAfterRun.

Example

import { Plugin, OnDone, HookOptions } from '@bem-raect/pack/lib/interfaces'

class MyPlugin implements Plugin {
  async onRun(done: OnDone, { context, output }: HookOptions) {
    // Do something stuff.
    done()
  }
}

export function useMyPlugin(): MyPlugin {
  return new MyPlugin()
}

Declaration

type OnDone = () => void
type HookOptions = { context: string; output: string }
type HookFn = (done: OnDone, options: HookOptions) => Promise<void>

interface Plugin {
  /**
   * Run hook at start.
   */
  onStart?: HookFn

  /**
   * Run hook before run.
   */
  onBeforeRun?: HookFn

  /**
   * Run hook at run.
   */
  onRun?: HookFn

  /**
   * Run hook after run.
   */
  onAfterRun?: HookFn

  /**
   * Run hook at finish.
   */
  onFinish?: HookFn
}