feat: add moduleFederation option

packages/babel-plugin/src/index.js

@@ -20,7 +20,9 @@ const properties = [
 
 const LOADABLE_COMMENT = '#__LOADABLE__'
 
-const loadablePlugin = declare((api, { defaultImportSpecifier = 'loadable' }) => {
+const loadablePlugin = declare((api, babelOptions) => {
+  const { defaultImportSpecifier = 'loadable' } = babelOptions
+
   const { types: t } = api
 
   function collectImportCallPaths(startPath) {
@@ -33,7 +35,7 @@ const loadablePlugin = declare((api, { defaultImportSpecifier = 'loadable' }) =>
     return imports
   }
 
-  const propertyFactories = properties.map(init => init(api))
+  const propertyFactories = properties.map(init => init(api, babelOptions))
 
   function isValidIdentifier(path, loadableImportSpecifier, lazyImportSpecifier) {
     // `loadable()`

packages/babel-plugin/src/properties/resolve.js

@@ -1,13 +1,27 @@
 import { getImportArg } from '../util'
 
-export default function resolveProperty({ types: t, template }) {
-  const buildStatements = template`
-    if (require.resolveWeak) {
-      return require.resolveWeak(ID)
-    }
-
-    return eval('require.resolve')(ID)
-  `
+export default function resolveProperty(
+  { types: t, template },
+  { moduleFederation },
+) {
+  const templates = {
+    federated: template`
+      require(ID)
+
+      if (require.resolveWeak) {
+        return require.resolveWeak(ID)
+      }
+
+      return eval('require.resolve')(ID)
+    `,
+    standard: template`
+      if (require.resolveWeak) {
+        return require.resolveWeak(ID)
+      }
+
+      return eval('require.resolve')(ID)
+    `,
+  }
 
   function getCallValue(callPath) {
     const importArg = getImportArg(callPath)
@@ -27,11 +41,36 @@ export default function resolveProperty({ types: t, template }) {
     return t.stringLiteral(importArg.node.value)
   }
 
-  return ({ callPath, funcPath }) =>
-    t.objectMethod(
+  return ({ callPath, funcPath }) => {
+    const { isBrowser } = process
+
+    if (moduleFederation) {
+      if ('isBrowser' in process) {
+        if (isBrowser === true) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            'The "moduleFederation: true" option will disable code splitting on the client-side',
+          )
+        }
+      } else {
+        // eslint-disable-next-line no-console
+        console.warn(
+          'It\'s recommended to use "isBrowser" global variable to detect the environment\n' +
+            'Try to add "webpack.DefinePlugin({ \'process.isBrowser\': true })" to your webpack config',
+        )
+      }
+    }
+
+    const targetTemplate =
+      moduleFederation && isBrowser === false ? 'federated' : 'standard'
+
+    return t.objectMethod(
       'method',
       t.identifier('resolve'),
       funcPath.node.params,
-      t.blockStatement(buildStatements({ ID: getCallValue(callPath) })),
+      t.blockStatement(
+        templates[targetTemplate]({ ID: getCallValue(callPath) }),
+      ),
     )
+  }
 }