It is advised to create a shared folder within your project, like so:
Exposing the entire "shared" directory
Inside the shared folder create index.ts file with the following content:
// exposeRequireContext depends on webpack's requireContext
import { exposeRequireContext } from 'live/expose'
// #see: https://webpack.js.org/guides/dependency-management/#requirecontext
const req = require.context(
'./', // require from current directory
true, // recursive
// it is important to ignore some folders and files
/^(?!.*__tests__.*)^(?!.*\.stories\.*)^(?!.*Spec.js)^(?!.*worker.js)^(?!.*__mocks__.*\.js)((.*\.([t|j]sx?\.*))[^.]*$)/
)
// this call expose recursively all the modules on the current folder
// second argument is the prefix of the modules
exposeRequireContext(req, 'plugin-example/shared/')
Import the shared index file from the app entry point
app.tsx
import '../shared'
// ... rest of the app.tsx file
That's it! Your modules are ready to be required by another plugin's web application.
Example result
Before importing from plugin-example there are some configurations needed to be set up.
1. Configure your webpack.config.js to treat these modules as external
webpack.config.js
...
externals: [
function(context, request, callback) {
// tells webpack that plugin-example is an external module
if (request.startsWith('plugin-example/'))
return callback(null, 'commonjs ' + request)
callback()
}
]
...
2. Configure your pom.xml to add explicitly show that dependency
