@misk/dev

Misk Dev

This package provides shared devDependencies and compiler options used to provide a common development environment across Misk tab repos. For Typescript linting, see @misk/tslint.

Getting Started

$ yarn add @misk/dev

TsConfig Template

Create a tsconfig.json file in the repo root directory with the following:

  {
    "extends": "../../node_modules/@misk/dev/tsconfig.base",
    "compilerOptions": {
      "outDir": "./lib/web/_tab/{tabname}"
    }
  }

Prettier Config

Create a prettier.config.js file in the repo root directory with the following:

const { createPrettierConfig } = require("@misk/dev")
module.exports = createPrettierConfig()

Webpack Template

Create a webpack.config.js file in the repo root directory with the following:

const { createTabWebpack } = require("@misk/dev")
const path = require('path')
const miskTab = require(path.join(process.cwd(), "package.json")).miskTab
module.exports = createTabWebpack(process.env.NODE_ENV, {
  "dirname": __dirname,
  miskTab
},
{
  // optional: any other Webpack config fields to be merged with the Misk Tab Webpack Config
})

Webpack Externals

Used in createTabWebpack but also available as an export of @misk/dev are the following externals objects that are formatted for use by Webpack to exclude libraries from compiled code:

• vendorExternals: vendor libraries included in @misk/common/lib/vendors.js
• miskExternals: all Misk libraries

If you are using one of the Webpack builders in @misk/dev, all externals above are included in the Webpack config. To use the externals in other Webpack configs, follow the steps below.

• Add the following to your webpack.config.js as relevant.

  const MiskDev = require('@misk/dev')
  
  ...
  
  module.exports = {
    mode
    entry
    ...
    externals: { ...MiskDev.vendorExternals, ...MiskDev.miskExternals },
  }

To build your own externals, use the exported function createExternals which consumes an object of the below structure which maps a key (NPM package name) to a normalized library name that will be mounted on browser window.

{
  "@blueprintjs/core": ["Blueprint", "Core"],
  "@blueprintjs/icons": ["Blueprint", "Icons"],
  "axios": "Axios",
  ...
}

VSCode

Included are recommended extensions and settings.

Add settings by copying the JSON from the file into .vscode/settings.json in your Tab repo.

Package.json Input Parameters

The child Webpack template above consumes some static initialization variables that you must add to your package.json. An example for the Config tab is included below.

Note that the output_path must match the outDir specified in the repo's tsconfig.json.

  "devDependencies": {
    "@misk/dev": "0.0.20"
  },
  "miskTab": {
    "name": "Config",
    "output_path": "dist",
    "port": "3000",
    "relative_path_prefix": "_tab/config/",
    "slug": "config"
  }

Included Libraries: Look at package.json

Releasing

Changelog (and Breaking Changes)