Misk Common
This package provides shared libraries, externals, and styles across Misk tab repos.
Getting Started
$ yarn add @misk/common
Automatic Inclusion
- If your Webpack config builds off of a template in
@misk/dev
,vendors.js
andstyles.js
will automatically be included in the build of that repo. - If your Webpack config does not build off of a template in
@misk/dev
, use the Manual Inclusion steps below.
Manual Inclusion
Using the common vendors libraries and styles. We use
copy-webpack-plugin
to copy the compiledvendor.js
andstyles.js
files into build folder.Install
copy-webpack-plugin
npm i -D copy-webpack-plugin
Add the following to your
webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin'); ... module.exports = { mode entry ... plugins: [ new CopyWebpackPlugin( [{ from: './node_modules/@misk/common/lib' }], { debug: 'info', copyUnmodified: true } ) ], }
Add the following to your
index.html
to importstyles.css
,vendors.js
, andcommon.js
<body> <!-- Misk Common Libraries --> <link rel="stylesheet" type="text/css" href="/@misk/common/styles.css" /> <script type="text/javascript" src="/@misk/common/vendors.js" preload /> <script type="text/javascript" src="/@misk/common/common.js" preload /> <!-- Other JS --> </body>
Included Libraries
From package.json
:
@blueprintjs/core
@blueprintjs/icons
axios
connected-react-router
dayjs
history
immutable
react
react-dom
react-helmet
react-hot-loader
react-redux
react-router
react-router-dom
react-router-redux
react-transition-group
redux
redux-saga
skeleton-css
styled-components
Included Styles
import '../node_modules/@blueprintjs/core/lib/css/blueprint.css'
import '../node_modules/normalize.css/normalize.css'
import '../node_modules/skeleton-css/css/skeleton.css'
import './styles/misk-common.css'
Contributing
#Adding a new package
yarn add {package}
to add the package topackage.json
- Add package to
vendorExternals
in@misk/dev/externals.js
- Add window to javascript require include in
src/vendors.js
- Update
README.md
with a copy of the updatedpackage.json
list of packages
#Adding a Cached Remote Asset
- There are sometimes cases where remote assets should be cached in order to be included in the single line imports of
vendors.js
orstyles.js
- Add a new task to
package.json
under the metadata key"miskCachedUrls"
with the format as follows"miskCachedUrls": { "taskname": { "filepath": "font.css", "url": "https://url.com/fonts/font.css" }, "taskname2": {...} }
taskname
: string description of the remote assetfilepath
: filepath within@misk/common/cachedUrls/
to which the url will be downloadedurl
: valid url that within a browser downloads or presents the desired file
yarn run refresh
initiates the download of all declared"miskCachedUrls"
using code in./refreshCachedUrls.js
- Cached files are refreshed on every package publish to NPM
Webpack Configs
webpack.config.js
: Exports common variables and functionswebpack.static.config.js
: Exports common styles filewebpack.vendor.config.js
: Exports common vendors library file