首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >用于弹簧引导后端+前端的热重装

用于弹簧引导后端+前端的热重装
EN

Stack Overflow用户
提问于 2018-04-17 23:01:58
回答 1查看 9.4K关注 0票数 4

我骑着那些关于spring工具和热重装的文档

https://docs.spring.io/spring-boot/docs/current/reference/html/howto-hotswapping.html https://docs.spring.io/spring-boot/docs/current/reference/html/using-boot-devtools.html#using-boot-devtools-restart-exclude

根据这一点,可以看到热重加载java和backed /Typescript/webpack应用程序的可能性。

这是我们的架构(快捷方式)。

代码语言:javascript
复制
mainmodule
    backendModules <- those modules are just maven project have theirs poms and etc
          backendModule1
          backendModule2
fontendModule
       content <- React/Typescript/Webpack/Less etc

backendModule2 --我们使用它来启动后端backendModule1 --只是一些额外的服务--fontendModule/backendModule1--是我们的整个反应应用程序

如果我说我们的前端文件需要重新加载,我说得对吗?

  1. 配置Intellij,就像我通常为后端<- -这很简单 1a.变更登记 1b。自动选择生成项目

我的问题是,为了强制重新加载前端文件,我必须做些什么?所以开发人员只需要运行一个应用程序,然后后端+前端就会自动重新加载。

  1. 向资源模式添加前端扩展(Intellij: Build,execution ->编译器)?js,json,js,更少等等?
  2. 根据doc的说法,添加“Spring.devtools.restart.附加路径”

有人能做到吗?我们没有收到任何错误等等..。

如果有什么不清楚的地方,请告诉我,这样我们就可以澄清

EN

回答 1

Stack Overflow用户

发布于 2018-04-27 06:11:30

我知道有两种不同的方法可以做到这一点。

1)使用Intellij文件监视插件

2)将webpack dev服务器作为春启动应用程序的反向代理运行。

1)

  • 从存储库安装插件“文件监视程序”
  • 转到设置-工具-文件监视程序
  • 定义Webpack任务
    • 文件类型:任意
    • 定义一个只监视javascript文件的新范围
    • 程序:要么从/node/ webpack /bin/webPack.js运行webpack,要么创建其他一些可执行文件(比如$ProjectFileDir$/webpack.sh)
    • 如果您选择从node_modules运行webpack (顺便说一下,由于相对路径问题而没有为我工作),那么插入参数(比如--config)
    • 将输出路径设置为刷新:$ProjectFileDir$/src/main/静态/js/bundled
    • 将工作目录设置为:$ProjectFileDir$

现在,如果在定义的范围内保存文件,webpack任务将运行。之后,您必须在浏览器中刷新页面。是从https://intellij-support.jetbrains.com那里得到的

2)这种方式更先进,但更难正确配置。您将拥有自动重新加载(页面刷新)和完全热重加载(反应状态保持不变)。

其基本思想是运行webpack开发服务器,并使用该服务器作为春季引导后端的反向代理。开发服务器将自己处理对热重加载内容的请求,并将所有其他内容传递给后端。是从https://www.codingbismuth.com/那里得到的。

作为一个例子,配置

代码语言:javascript
复制
{
  "name": "",
  "version": "0.0.1",
  "description": "",
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
    "xy"
  ],
  "author": "murphy",
  "license": "",
  "bugs": {
    "url": ""
  },
  "scripts": {
    "start:dev": "webpack-dev-server --config webpack.dev_server.js"
  },
  "homepage": "",
  "dependencies": {
    "file-saver": "^1.3.3",
    "prop-types": "^15.5.10",
    "react": "^16.2.0",
    "react-bootstrap-typeahead": "^2.3.0",
    "react-dom": "^16.2.0",
    "react-modal": "^3.1.8",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-datetime": "^2.11.1",
    "rest": "^1.3.1",
    "moment": "^2.20.1",
    "webpack": "^3.10.0",
    "swagger-ui": "^3.13.4",
    "webpack-dev-server": "^2.11.2"
  },
  "devDependencies": {
    "webpack-cli": "^2.0.15",
    "react-hot-loader": "^4.1.2",
    "babel-core": "^6.18.2",
    "babel-eslint": "^8.0.3",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "eslint": "^4.13.1",
    "eslint-plugin-react": "^7.5.1",
    "eslint-loader": "^1.9.0",
    "eslint-watch": "^3.1.3",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-flowtype": "^2.40.1",
    "uglifyjs-webpack-plugin2": "^1.0.3"
  }
}

代码语言:javascript
复制
const { resolve } = require('path');
const path = require('path');
const webpack = require('webpack');

module.exports = {
    context: resolve(__dirname, '.'),

    entry: [
        'react-hot-loader/patch',
        // activate HMR for React

        'webpack-dev-server/client?http://localhost:8888',
        // bundle the client for webpack-dev-server
        // and connect to the provided endpoint

        'webpack/hot/only-dev-server',
        // bundle the client for hot reloading
        // only- means to only hot reload for successful updates

        // the entry point of our app
        './src/main/js/router/mainrouter.jsx',
    ],
    output: {
        filename: './mainbundle.js',
        // the output bundle

        path: resolve(__dirname, '/src/main/resources/static/js/bundled'),

        publicPath: '/js/bundled/',
        // necessary for HMR to know where to load the hot update chunks
    },

    devtool: 'sourcemaps',
    devServer: {
        hot: true,
        contentBase: [resolve(__dirname, "."), resolve(__dirname, "./src/main/resources/static/js/bundled")],
        proxy: {
            "/": {
                target: {
                    host: "localhost",
                    protocol: 'http:',
                    port: 8087,
                },
            },
            ignorePath: true,
            changeOrigin: true,
            secure: false,
        },
        publicPath: '/js/bundled/',
        port: 8888,
        host: "localhost",
    },
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
                options: {
                    // fix: true, // autofix
                    cache: true,
                    failOnError: false,
                    emitWarning: true,
                    quiet: true,
                },
            },
            {
                test: path.join(__dirname, '.'),
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {
                    // cacheDirectory: true,
                    presets: ['es2015', 'react'],
                },
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader?modules'],
            },
        ],
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        // enable HMR globally

        new webpack.NamedModulesPlugin(),
        // prints more readable module names in the browser console on HMR updates
    ],
};

春季引导应用程序运行在:8087,webpack开发服务器在8888上运行。现在,在您的index.html中包含了mainbundle.js。运行您的spring引导应用程序,并在第二个终端运行:

代码语言:javascript
复制
npm run start:dev

在:8888上访问网页,以便在文件更改时进行热重新加载。

票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49888724

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档