Question

我想对某些Portlet进行前端代码（HTML，CSS，JS）的热部署，这样可以节省开发时间，而不必重新部署整个Portlet。

Portlet是一个.war文件。

在较旧的Liferay 6.2中，只需覆盖tomcat/webapps/portlet-name目录中的静态前端代码，就可以实现。在Liferay DXP中，这不再可能，因为Portlet不再提取到tomcat/webapps/。

是否有可能进行前端热部署，所以我可以更改例如我的.html文件正在运行，而不必重新部署整个.war Portlet吗？

Answer 1

除了描述的方法对于维护来说是一种非常不好的习惯之外，我想知道您实际上节省了多少时间（正如您所说的那样）。

您始终可以实现Portlet，以包括Liferay无法控制的地方的各种资源，但是自然地，提供的工具将无法帮助您保持所有内容的同步-这将是您要解决的个人问题。

顺便说一句：Tomcat的模式（您可以只替换webapps目录中的随机内容）称为 development 模式。

Answer 2

我们找到了另一种解决方案来缩短前端开发时间，但它的功能与旧版Liferay 6.2完全不同。

基本上，我们使用express.js代理服务器，该服务器在某些不同的端口上与Liferay并行运行。除对HTML，CSS和JS文件的请求外，该代理服务器将所有请求转发到另一个运行的liferay。而是直接从本地文件系统提供服务。更改并保存HTML，CSS或JS文件后，还会触发前端的自动重建。

这个小型代理服务器基本上由这两个文件组成：

dev-server.js文件：

const packageConfig = require('../../../package.json');
const projectName = packageConfig.name;

const config = Object.assign({}, {
    port: 8088,
    liferayUrl: 'http://localhost:8080',
    liferayVersion: 7,
    webpackConfigFile: './webpack.development.config.js',
}, packageConfig.devServer || {});

const path = require('path');
const webpack = require('webpack');
const middleware = require('webpack-dev-middleware');
const webpackCompiler = webpack(require(config.webpackConfigFile));
const express = require('express');
const app = express();

const httpProxy = require('http-proxy');
const liferayProxy = httpProxy.createProxyServer();

let publicPath = `/o/${projectName}/static/js/`;
if(config.liferayVersion === 6) {
    publicPath = `/${projectName}/static/js/`
}

app.use(
    middleware(webpackCompiler, {
        publicPath: `/o/${projectName}/static/js/`
    })
);

app.all('/*', function(req, res) {
    liferayProxy.web(req, res, {target: config.liferayUrl});
});

app.listen(config.port, () => console.log('Development server listening on port ' + config.port + '!'));

还有package.json：

{
  "name": "react-base",
  "version": "1.0.0",
  "license": "NOLICENSE",
  "private": true,
  "scripts": {
    "preinstall": "node ./target/ui-build/build/preInstallHook.js",
    "build-dev": "gulp --gulpfile ./target/ui-build/build/gulpfile.js && webpack --config ./target/ui-build/build/webpack.development.config.js --progress --profile",
    "build": "gulp --gulpfile ./target/ui-build/build/gulpfile.js production && webpack --config ./target/ui-build/build/webpack.production.config.js --bail",
    "lint": "eslint -c ./target/ui-build/build/.eslintrc.js --rulesdir \"node_modules/@myproject/react-component-lib/eslint-rules/\"  \"src/main/react/**/*.js\" ",
    "test": "jest --config=./target/ui-build/build/jest.config.js --rootDir=./ --passWithNoTests",
    "coverage": "jest --config=./target/ui-build/build/jest.config.js --rootDir=./ --passWithNoTests --coverage",
    "stats": "webpack-bundle-analyzer ./target/generated-sources/js/stats.json",
    "start:dev": "node ./target/ui-build/build/dev-server.js"
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0",
    "mobx": "3.1.16",
    "mobx-react": "4.4.3",
    "prop-types": "15.7.2",
    "react": "16.8.4",
    "react-dom": "16.8.4"
  },
  "devDependencies": {
    "autoprefixer": "^9.1.5",
    "babel-core": "^7.0.0-bridge.0",
    "@babel/core": "7.1.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "^23.0.0",
    "babel-loader": "8.0.4",
    "@babel/plugin-proposal-class-properties": "7.1.0",
    "@babel/plugin-proposal-decorators": "7.1.0",
    "@babel/plugin-proposal-object-rest-spread": "7.0.0",
    "@babel/plugin-transform-runtime": "7.1.0",
    "@babel/preset-env": "7.1.0",
    "@babel/preset-react": "7.0.0",
    "css-loader": "1.0.0",
    "enzyme": "3.4.0",
    "enzyme-adapter-react-16": "1.5.0",
    "eslint": "4.19.1",
    "eslint-plugin-jsx-a11y": "6.0.3",
    "eslint-plugin-react": "7.11.1",
    "express": "4.17.1",
    "file-loader": "2.0.0",
    "fs-extra": "7.0.0",
    "gulp": "3.9.1",
    "gulp-concat": "2.6.1",
    "http-proxy": "1.17.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "^23.0.0",
    "jest-cli": "^23.0.0",
    "node-sass": "4.9.3",
    "postcss-loader": "3.0.0",
    "raf": "3.4.1",
    "react-test-renderer": "16.8.4",
    "run-sequence": "1.2.2",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.1",
    "url-loader": "1.1.2",
    "url-search-params-polyfill": "5.0.0",
    "webpack": "4.20.2",
    "webpack-bundle-analyzer": "^3.0.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-middleware": "3.7.0"
  },
  "sideEffects": [
    "*.css",
    "*.scss"
  ]
}

可以通过调用“ yarn run start：dev”来启动代理服务器，然后可以通过http://localhost:8088通过代理服务器访问Liferay

Liferay DXP前端热部署

2 个答案: