Managing the package.json

package.json files are configured and generated by the PKG aspect.

package.json properties are set either manually, using in the PKG config, or programmatically, using the PKG API.

To set specific properties to a Component, use the following example configuration and apply it using variants or the component's component.json.

{
  "teambit.pkg/pkg": {
    "packageJson": {
      "main": "dist/{main}.js"
    }
  }
}
CopiedCopy

Use the placeholders listed below to inject specific component information into the 'pkg' configurations. In the example below the package.json property is configured to dist/ followed by the Component main File path.

  • {name} - The component's full name.
  • {scope} - The component's scope name.
  • {main} - The name of the main file (leaving out the extension) - for example index.js will be index.

The example below, uses Variants to configure all components under the ui namespace with various package.json properties.

{
  "teambit.workspace/variants": {
    "{ui/*}": {
      "teambit.pkg/pkg": {
        "packageJson": {
          "private": false,
          "main": "dist/{main}.js",
          "custom-prop": "value"
        }
      }
    }
  }
}
CopiedCopy

Set configuration from an Env

Implement the getPackageJsonProps service handler in your Env implementation file (my-env.env.ts). If your Env extends another Env, this will completely override its configured properties (for configuration merging, see the next example).

// my-env.env.ts

import { PackageEnv } from '@teambit/envs';

export class MyEnv implements PackageEnv {
  // ...

  getPackageJsonProps() {
    return {
      main: 'dist/{main}.js',
      types: '{main}.ts',
    };
  }
}
CopiedCopy

To merge new package.json properties with the properties set by the Env your Env extends, use the overridePackageJsonProps Env transformer in your Env main runtime file (my-env.main.runtime.ts).

// my-react.main.runtime.ts

// ...

export class MyReactMain {
  // ...

  static async provider([react, envs]: [ReactMain, EnvsMain]) {
    const templatesReactEnv = envs.compose(react.reactEnv, [
      react.overridePackageJsonProps({
        'my-property': '123',
      }),
    ]);

    envs.registerEnv(templatesReactEnv);
    return new MyReactMain();
  }
}

// ...
CopiedCopy