Liferay 7.0 CE React Portlet构建时出现module未定义引用错误求助

嘿，我来帮你搞定这个构建时遇到的问题！你遇到的两个问题其实都是旧版模板依赖和配置适配的问题，咱们一步步来解决：

1. 处理babel-preset-es2015废弃警告 #

这个警告是因为babel-preset-es2015已经被官方废弃了，现在推荐用babel-preset-env，它能根据你指定的目标环境自动决定需要转译的ES语法，比旧的预设更灵活高效。你可以按以下步骤替换：

• 先卸载旧的预设包：

  npm uninstall babel-preset-es2015
  

• 安装最新的babel-preset-env开发依赖：

  npm install babel-preset-env --save-dev
  

• 找到项目里的Babel配置文件（一般是.babelrc或者babel.config.js），把presets数组里的es2015替换成env，修改后大概是这样：

  {
    "presets": [
      "env",
      "react"
    ]
  }
  

2. 解决reference error: module is not defined错误 #

这个错误本质是浏览器环境不支持Node.js的module语法，要么是打包配置没把模块转成浏览器能识别的格式，要么是Portlet的资源引用有问题。试试这几个方案：

方案一：调整Webpack配置 #

打开项目的webpack.config.js，检查并修改以下配置：

• 确保target设置为web（让Webpack针对浏览器环境打包）：

  module.exports = {
    target: 'web',
    // 其他现有配置...
  };
  

• 把output.libraryTarget改成umd，这样打包后的文件能兼容CommonJS、AMD和全局变量三种模块方式：

  output: {
    filename: '[name].js',
    libraryTarget: 'umd',
    library: 'YourPortletName'
  }
  

方案二：优化Babel模块转译配置 #

在Babel配置里，给env预设加上modules: false的参数，让Webpack来处理模块打包（而不是让Babel把ES模块转成CommonJS，避免浏览器识别不了）：

{
  "presets": [
    ["env", { "modules": false }],
    "react"
  ]
}

方案三：检查Portlet的资源引用配置 #

打开portlet.xml或者liferay-portlet.xml，确认你打包后的JS文件被正确引用了。比如在portlet.xml里添加这样的初始化参数：

<init-param>
  <name>com.liferay.portlet.header-portlet-javascript</name>
  <value>/js/[你的打包文件名].js</value>
</init-param>

完成以上调整后，重新执行./gradlew build --stacktrace，应该就能顺利构建了！

内容的提问来源于stack exchange，提问作者Jani Oksanen