Using the common vendors libraries and styles. We use copy-webpack-plugin to copy the compiled vendor.js and styles.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 import styles.js and vendors.js
```
<body>

  ...

  
  <script type="text/javascript" src="js/styles.js" async></script>
  <script type="text/javascript" src="js/vendors.js" preload></script>

  
</body>
```

Use @misk/common externals to keep Webpack from bundling duplicate libraries and styles into your Misk module. Add the following to your webpack.config.js. We are working on a way to export this directly out of @misk/common so manual declaration of externals is not required.

const miskCommonExternals = [{
  "@blueprintjs/core": {
    amd: "@blueprintjs/core",
    commonjs: "@blueprintjs/core",
    commonjs2: "@blueprintjs/core",
    root: "window.BlueprintjsCore",
  }
}, {
  "@blueprintjs/icons": {
    amd: "@blueprintjs/icons",
    commonjs: "@blueprintjs/icons",
    commonjs2: "@blueprintjs/icons",
    root: "window.BlueprintjsIcons",
  }
}, {
  "axios": {
    amd: "axios",
    commonjs: "axios",
    commonjs2: "axios",
    root: "window.Axios",
    },
}, {
  "history": {
    amd: "history",
    commonjs: "history",
    commonjs2: "history",
    root: "window.History",
    },
}, {
  "@misk/common": {
    amd: "@misk/common",
    commonjs: "@misk/common",
    commonjs2: "@misk/common",
    root: "window.MiskCommon",
    },
}, {
  "@misk/components": {
    amd: "@misk/components",
    commonjs: "@misk/components",
    commonjs2: "@misk/components",
    root: "window.MiskComponents",
    },
}, {
  "@misk/dev": {
    amd: "@misk/dev",
    commonjs: "@misk/dev",
    commonjs2: "@misk/dev",
    root: "window.MiskDev",
    },
}, {
  "react": {
    amd: "react",
    commonjs: "react",
    commonjs2: "react",
    root: "window.React",
  },
}, {
  "react-dom": {
    amd: "react-dom",
    commonjs: "react-dom",
    commonjs2: "react-dom",
    root: "window.ReactDOM",
  }
}, {
  "react-helmet": {
    amd: "react-helmet",
    commonjs: "react-helmet",
    commonjs2: "react-helmet",
    root: "window.ReactHelmet",
  },
}, {
  "react-hot-loader": {
    amd: "react-hot-loader",
    commonjs: "react-hot-loader",
    commonjs2: "react-hot-loader",
    root: "window.ReactHotLoader",
    },
}, {
  "react-redux": {
    amd: "react-redux",
    commonjs: "react-redux",
    commonjs2: "react-redux",
    root: "window.ReactRedux",
    },
}, {
  "react-router": {
    amd: "react-router",
    commonjs: "react-router",
    commonjs2: "react-router",
    root: "ReactRouter",
    },
}, {
  "react-router-dom": {
    amd: "react-router-dom",
    commonjs: "react-router-dom",
    commonjs2: "react-router-dom",
    root: "window.ReactRouterDom",
    },
}, {
  "redux": {
    amd: "redux",
    commonjs: "redux",
    commonjs2: "redux",
    root: "window.Redux",
    },
}, {
  "styled-components": {
    amd: "styled-components",
    commonjs: "styled-components",
    commonjs2: "styled-components",
    root: "window.StyledComponents",
    },
}]

...

module.exports = {
  mode
  entry
  ...
  externals: miskCommonExternals,
}

Included Libraries

From package.json:

  "@blueprintjs/core": "^3.0.1",
  "@blueprintjs/icons": "^3.0.0",
  "axios": "^0.18.0",
  "connected-react-router": "^4.3.0",
  "history": "^4.7.2",
  "react": "^16.4.1",
  "react-dom": "^16.4.1",
  "react-helmet": "^5.2.0",
  "react-hot-loader": "^4.3.3",
  "react-redux": "^5.0.7",
  "react-router": "^4.3.1",
  "react-router-dom": "^4.3.1",
  "react-transition-group": "^2.2.1",
  "redux": "^4.0.0",
  "skeleton-css": "^2.0.4",
  "styled-components": "^3.3.3"

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'

FAQs

What is @misk/common?

Is @misk/common popular?

Is @misk/common well maintained?

Package last updated on 18 Jul 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@misk/common

@misk/common

Getting Started

Included Libraries

Included Styles

Related posts

Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft

Weekly Downloads Now Available in npm Package Search Results