Misk-Web Build and Dev Tools
npm install @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.
``bash`
$ yarn add @misk/dev
Create a tsconfig.json file in the repo root directory with the following:
`JSON`
{
"extends": "../../node_modules/@misk/dev/tsconfig.base",
"compilerOptions": {
"outDir": "./lib/web/_tab/{tabname}"
}
}
Create a prettier.config.js file in the repo root directory with the following:
`Javascript`
const { createPrettierConfig } = require("@misk/dev")
module.exports = createPrettierConfig()
Create a webpack.config.js file in the repo root directory with the following:
`Javascript`
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
})
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
- : 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.
`Javascript
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.
`JSON`
{
"@blueprintjs/core": ["Blueprint", "Core"],
"@blueprintjs/icons": ["Blueprint", "Icons"],
"axios": "Axios",
...
}
Included are recommended extensions and settings.
Add settings by copying the JSON from the file into .vscode/settings.json in your Tab repo.
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.
`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`