Skip to content
This repository has been archived by the owner on Dec 5, 2022. It is now read-only.

Solving the same libraries in many microservices #277

Open
morriq opened this issue Dec 8, 2018 · 5 comments
Open

Solving the same libraries in many microservices #277

morriq opened this issue Dec 8, 2018 · 5 comments
Labels

Comments

@morriq
Copy link
Contributor

morriq commented Dec 8, 2018

Hello,

I created webpack plugin to handle the issue with common libraries used by microservices. It's quiet another approach to @tsnolan23 solution (with creating fragment-common).

https://www.npmjs.com/package/microservices-webpack-plugin

Using this plugin you need to have webpack.config similar to

module.exports = {
	entry: resolve(__dirname, 'index.js'),
	externals: {
		react: 'react'
	},
	output: {
		path: resolve(__dirname, 'dist'),
		libraryTarget: 'amd'
	},
	plugins: [
		new MicroservicesWebpackPlugin([
			{ name: 'react', path: `umd/react.production.min.js` },
		])
	]
};

It will make dist/main.js
with

define('react', ['https://unpkg.com/[email protected]/umd/react.production.min.js'], v => v)
define(["react"],function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){n(1)},function(t,n){t.exports=e}])});

Would be nice if you could link to it in README.md if you think it makes sense.
Thx

@WarisR
Copy link

WarisR commented Dec 11, 2018

Great! I agree it makes sense. I also do something like this for my micro frontend fragments.

But what I did is MicroservicesWebpackPlugin should set externals options automatically.
Users don't need to declare code below by their self.

externals: {
       react: 'react'
},

You can do something like this in your library code to assign externals

apply(compiler) {
          compiler.options.externals = this.modules.map(({ name }) => name);
}

@morriq
Copy link
Contributor Author

morriq commented Dec 16, 2018

Nice idea, I introduced it in https://github.com/morriq/microservices-webpack-plugin/pull/1/files :) .
Thank you!

@vigneshshanmugam
Copy link
Collaborator

The setup is something similar in Zalando, Check my answer here #196 (comment)

@morriq
Copy link
Contributor Author

morriq commented Jan 18, 2019

@vigneshshanmugam exactly. This plugin handles it for you

@vigneshshanmugam
Copy link
Collaborator

Do you want to give a PR in the readme?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

3 participants