如何在其他 React Portlet 中使用共享 React 小部件组件 - Liferay 7.4

Question

我有一个要求，我需要在 React 中创建可重用组件，并在 Liferay 中的其他 React Portlet 中使用它们。

以下是我尝试过的步骤：

我有一个 React 小部件（可重用小部件）和 React Portlet（消费 Portlet）

1. 可重复使用的小部件：

   ReusableComponent.js

   import React from 'react';
   
   const ReusableComponent = () => {
     return <div>This is a reusable React component.</div>;
   };
   
   export default ReusableComponent;
   

2. 在其他 Portlet 中导入组件，例如：

   Portlet1.js

   import React from 'react';
   import ReusableComponent from '../../reusable-component/src/main/resources/jsx/ReusableComponent';
   
   const Portlet1 = () => {
     return (
       <div>
         <h2>Portlet 1</h2>
         <ReusableComponent />
       </div>
     );
   };
   
   export default Portlet1;
   

3. 这是我的.babelrc

   {
     "presets": ["@babel/preset-env", "@babel/preset-react"],
     "plugins": ["@babel/plugin-proposal-class-properties"]
   }
   

部署后，我收到如下错误：“未捕获的引用错误：导出未定义”，然后是“Liferay-am-loader。loader.js 中的 require 调用失败”，缺少依赖项。

我在这里做错了什么吗？有人可以建议我如何实现相同的功能吗？

Answer 1

在 portlet1.js 项目中，如果不只是创建它并导入小部件项目，您应该有一个文件 .npmbundlerrc

{
    
    "config": {
        "imports": {
            "reusable-component": {         
                "reusable-component": "^1.0.0"          
            }           
        }
    }
}

插入导入后，您可以像这样调用导入

import ReusableComponent from 'reusable-component/jsx/ReusableComponent';

您可以对liferay组件或依赖项进行同样的思考，只需在react和react-dom下面的示例中添加导入，以便与liferay具有相同的版本

   {
        "config": {
            "imports": {
                "reusable-component": {         
                    "reusable-component": "^1.0.0"          
                },
                "@liferay/frontend-js-react-web": {             
                    "react": "*",
                    "react-dom": "*"
                } 
            }
        }
    }