文章/答案/技术大牛

发布

社区首页 >问答首页 >如何运用“情感/反应”和“创建反应应用程序”的“情感/样式”

问如何运用“情感/反应”和“创建反应应用程序”的“情感/样式”
EN

Stack Overflow用户

提问于 2022-05-24 12:24:18

回答 1查看 461关注 0票数 1

我有以下架构：

main-frontend

foo-frontend

bar-frontend

baz-frontend

main-frontend、foo-frontend、bar-frontend和baz-frontend都是使用create-react-app生成的标准反应应用程序。

除了main-frontend之外，所有这些组件都将UI发布为一个反应组件，包装在一个Web组件中。这些网络组件可以加载到main-frontend中，将所有3个子前端编织成一个超级前端。

我面临的问题是，为了使这种方法起作用，所有4个前端都必须将react、react-dom、react-router以及正在使用的任何CSS框架外部化。

我可以修改Webpack的配置，为create-react-app生成的反应应用程序，使用rewire包和几个脚本。我正在为面临类似问题的其他人复制下面的这些内容。

在foo-frontend、bar-frontend和baz-frontend中，

package.json

  "dependencies": {
    ...
    "rewire": "^6.0.0"
    ...
  },
  "scripts": {
    "start": "node start.js",
    "build": "node build.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "webpackConfig": {
    "externals": {
      "react": "react",
      "react-dom": "react-dom",
      "@emotion/react": "@emotion/react",
      "@emotion/styled": "@emotion/styled"
    }
  }

build.js

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');

const {
  webpackConfig: {
    externals
  }
} = require('./package.json');

const config = defaults.__get__('config');

config.externals = externals;

start.js

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/start.js');
const webpackConfig = require('react-scripts/config/webpack.config');

const {
  webpackConfig: {
    externals
  }
} = require('./package.json');

defaults.__set__('configFactory', (webpackEnv) => {
  const config = webpackConfig(webpackEnv);

  config.externals = externals;

  return config;
});

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <title>Atlas Reviews</title>
    <script src="https://cdn.jsdelivr.net/npm/react@18.1.0/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@18.1.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@emotion/react@11.9.0/dist/emotion-react.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@emotion/styled@11.8.1/dist/emotion-styled.umd.min.js"></script>
  </head>
  <body>
  ...
  </body>
</html>

我遇到的问题是，@emotion/react和@emotion/styled没有被正确地外部化。

Uncaught ReferenceError: emotion is not defined
    at Object.@emotion/react (external var "emotion":1:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../src/components/App/styles.tsx (index.tsx:25:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../src/components/App/index.tsx (logo.svg:34:1)
    at Module.options.factory (react refresh:6:1)

我该怎么解决这个问题？

reactjs

webpack

emotion

micro-frontend

css-in-js

回答 1

Stack Overflow用户

发布于 2022-05-24 17:29:37

我设法解决了这个问题，不是用@emotion/react和@emotion/styled，而是用styled-components。

公平地说，这是我最初对CSS在JS框架的偏爱。

在我以前的尝试中，我使用了错误的styled-components库版本。

以下是我如何做到的：

所有4个React应用程序中的package.json都应该像这样修改。

{
  ...
  "dependencies": {
    ...
    "@types/styled-components": "^5.1.25",
    "rewire": "^6.0.0",
    "styled-components": "^5.3.5",
    ...
  },
  "scripts": {
    "start": "PORT=3004 node start.js",
    "build": "PORT=3004 node build.js",
    "test": "PORT=3004 react-scripts test",
    "eject": "PORT=3004 react-scripts eject"
  },
  "webpackConfig": {
    "externals": {
      "react": "React",
      "react-dom": "ReactDOM",
      "react-is": "ReactIS",
      "styled-components": "styled"
    }
  },
  ...
}

三个分额的public/index.html应该修改如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <title>Atlas Reviews</title>
    <script src="https://cdn.jsdelivr.net/npm/react@18.1.0/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@18.1.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-is@18.1.0/umd/react-is.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.5/dist/styled-components.min.js"></script>
    ...
  </head>
  <body>
  ...
  </body>
</html>

超级前端的public/index.html将类似，但也将包括导入子前端的script标记：

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <title>Atlas Reviews</title>
    <script src="https://cdn.jsdelivr.net/npm/react@18.1.0/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@18.1.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-is@18.1.0/umd/react-is.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.5/dist/styled-components.min.js"></script>
    <script src="http://localhost:3001/static/js/bundle.js"></script>
    <script src="http://localhost:3002/static/js/bundle.js"></script>
    <script src="http://localhost:3003/static/js/bundle.js"></script>
    ...
  </head>
  <body>
  ...
  </body>
</html>

TL;DR;：注意react-is和styled-components的外部以及通过CDN加载的styled-components脚本的版本。

票数 0

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

原文链接：

https://stackoverflow.com/questions/72362844

复制

相似问题

问如何运用“情感/反应”和“创建反应应用程序”的“情感/样式”
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何运用“情感/反应”和“创建反应应用程序”的“情感/样式”EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何运用“情感/反应”和“创建反应应用程序”的“情感/样式”
EN