Question

我正在处理一个旧项目，该项目仍在前端运行jquery，在后端运行java spring，在构建时运行maven。我的老板已经要求我将反应引入堆栈中，以便我们可以进行一些页面转换。

我的目标是不严重影响现有的实现，而是将webpack的结果输出到定义的目录中。这样，我可以将后端指向该位置进行路径设置。

到目前为止，我在我的工作区中有一个apps文件夹，其中包含我所有可以独立工作的东西。这是使用“ npx create-react-app folderName”生成的。

我已经阅读了一些有关如何设置导出的内容，但通常感到困惑。我发现，作为大量资源，您需要进行新的设置或替换现有的设置。我目前只希望替换单个页面。

Answer 1

我不认为create-react-app是这里的正确工具，因为您没有使用React创建一个完整的应用程序，而是逐步添加了React代码。我建议自己使用Webpack。这样可以使您的应用程序更整洁，更易于使用其他代码进行维护。

如果您想将React代码与现有代码分开，则可以基于webpack的Authoring Libraries Guide创建一个库。然后，您可以使用ReactDOM.render()（Docs）渲染组件。请注意，您可以在一页上（几乎）无限次调用此函数，从而可以部分替换现有代码。

然后替换页面意味着创建一个根DOM元素并调用render函数：

<!-- page.html -->
<html>
    <head></head>
    <body>
        <!-- more html -->
        <div id="page-root" />
        <!-- more html -->
    </body>
</html>

import React from 'react'
import ReactDOM from 'react-dom'
import Page from './routes/YourPageComponent'

ReactDOM.render(<Page />, document.getElementById('page-root'));

先前的代码意味着您将代码呈现在新代码中，该新代码由您的webpack加载程序（例如Babel-Loader，Typescript-Loader）转译。如果要在现有代码中呈现代码，请查看Doc's about Webpack Libraries以将呈现函数导出到全局上下文中。以下脚本是我脑海中不可思议的示例。

// components/PageExampleComponent.jsx
import React from 'react';

export default function({pageTitle="example"}){
    return <div>
        <h1>{pageTitle}</h1>
    </div>
}



// libary/index.js
import PageExampleComponent from './components/PageExampleComponent';

export const MyLibrary = {
    PageExampleComponent
}

之前的代码需要以下（部分）Webpack配置来导出MyLibrary：

module.exports = {
  //...
  output: {
    library: 'MyLibrary',
    // based on a fast look into the docs, I think the following are optional:
    libraryTarget: 'window',
    libraryExport: 'default'
  }
};

要渲染该库的组件，您需要React和ReactDOM作为网站中的脚本-当然还有您自己的库脚本。然后，您可以使用普通JavaScript调用ReactDOM.render()：

ReactDOM.render(
    React.createElement(window.MyLibrary.PageExampleComponent),
    document.getElementById('page-root')

另一个想法是将所有内容移至Webpack。这可能会更容易，因为您没有不同的Javascript版本和方言的障碍（例如，支持和不支持JSX）。您甚至可以通过使用两个入口点来分隔jQuery代码和React代码：

module.exports = {
  //...
  entry: {
    oldCode: './src/jqueryIndex.js',
    replacement: './src/reactIndex.js'
  },
  output: {
    filename: "[name].js"
  }
};

设置webpack以导出到设置文件夹

1 个答案: