- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试构建一个具有 2 个入口点的 React 应用程序,一个用于应用程序,一个用于管理面板。
我从 Create React App V2 开始,并关注此 gitHub 问题线程 https://github.com/facebook/create-react-app/issues/1084和本教程 http://imshuai.com/create-react-app-multiple-entry-points/ .
我正在尝试将添加多个入口点的说明从 CRA V1 移植到 V2 中,但我认为我遗漏了一些东西。
弹出 CRA 后,这些是我更改/添加到 paths.js 的路径:
module.exports = {
appBuild: resolveApp('build/app'),
appPublic: resolveApp('public/app'),
appHtml: resolveApp('public/app/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/app'),
appSrc: resolveApp('src'),
adminIndexJs: resolveModule(resolveApp, 'src/admin'),
adminSrc: resolveApp('src'),
adminPublic: resolveApp('public/admin'),
adminHtml: resolveApp('public/admin/index.html'),
};
我已将这些入口点添加到 webpack:
entry: {
app: [
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs,
].filter(Boolean),
admin: [
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.adminIndexJs,
].filter(Boolean)
},
output: {
path: isEnvProduction ? paths.appBuild : undefined,
pathinfo: isEnvDevelopment,
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
我已经像这样修改了 HtmlWebpackPlugin:
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
filename: paths.appPublic,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.adminHtml,
filename: paths.adminPublic,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
并修改了 webpack Dev Server:
historyApiFallback: {
disableDotRule: true,
rewrites: [
{ from: /^\/admin.html/, to: '/build/admin/index.html' },
]
},
我的文件结构如下:
.
+-- _src
| +-- app.js
| +-- admin.js
| +-- _app
| +-- App.js
| +-- _admin
| +-- App.js
| +-- _shared
| +-- serviceWorker.js
+-- _public
| +-- _app
| +-- index.html
| +-- manifest.json
| +-- _admin
| +-- index.html
| +-- manifest.json
我希望我的构建文件夹包含一个应用程序文件夹和一个管理文件夹,其中包含 2 个单独的 SPA。
当我运行yarn start
时,它不会抛出任何错误并显示编译成功!
但是它只部分编译了应用程序而不是管理应用程序,没有js已编译或添加到应用程序中。
yarn build
确实会抛出一个错误,并且编译了一半的应用程序,没有管理应用程序。这是错误:
yarn run v1.12.3
$ node scripts/build.js
Creating an optimized production build...
Failed to compile.
EISDIR: illegal operation on a directory, open
'foo/bar/public/app'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
在构建文件夹中,它在退出之前创建了很多这样的内容:
.
+-- _static
| +-- _css
| +-- _js
| +-- _media
| +-- logo.5d5d9eef.svg
+-- precache-manifest.a9c066d088142837bfe429bd3779ebfa.js
+-- service-worker.js
+-- asset-manifest.json
+-- manifest.json
有谁知道我错过了什么才能使其正常工作?
最佳答案
我意识到将 HTMLWebpackPlugin
中的 filename
设置为 appPublic
或 adminPublic
是不正确的,它应该是 app/index.html
admin/index.html
。
但是,如果我希望在构建文件夹中有 2 个单独的文件夹,一个用于应用程序,另一个用于管理应用程序,使用此方法需要更多的复杂性,因为 webpack 中没有可用于设置目标的条目变量小路。例如,我需要能够执行类似 [entry]/static/js/[name].[contenthash:8].chunk.js
的操作。我认为做到这一点的一种方法是使用 Webpack MultiCompiler。
但是,我没有这样做,而是将入口点作为 package.json 中的环境变量传递,并添加 REACT_APP_ENTRY=
,如下所示:
"scripts": {
"start-app": "REACT_APP_ENTRY=app node scripts/start.js",
"build-app": "REACT_APP_ENTRY=app node scripts/build.js",
"start-admin": "REACT_APP_ENTRY=admin node scripts/start.js",
"build-admin": "REACT_APP_ENTRY=admin node scripts/build.js",
"test": "node scripts/test.js"
},
在 start.js 中,我在顶部添加了 const isApp = process.env.REACT_APP_ENTRY === 'app';
:
'use strict';
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';
const isApp = process.env.REACT_APP_ENTRY === 'app';
并更新了端口设置的位置,这样我就可以同时运行两个开发服务器而不会发生冲突:
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || (isApp ? 3000 : 3001);
const HOST = process.env.HOST || '0.0.0.0';
然后在 paths.js 顶部添加 const isApp = process.env.REACT_APP_ENTRY === 'app';
:
const envPublicUrl = process.env.PUBLIC_URL;
const isApp = process.env.REACT_APP_ENTRY === 'app';
最后根据环境变量集更新路径:
module.exports = {
dotenv: resolveApp('.env'),
appPath: resolveApp('.'),
appBuild: isApp ? resolveApp('build/app') : resolveApp('build/admin'),
appPublic: isApp ? resolveApp('public/app') : resolveApp('public/admin'),
appHtml: isApp ? resolveApp('public/app/index.html') : resolveApp('public/admin/index.html'),
appIndexJs: isApp ? resolveModule(resolveApp, 'src/app') : resolveModule(resolveApp, 'src/admin'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appTsConfig: resolveApp('tsconfig.json'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json')),
};
我认为这种方法非常简单,对于这种用例来说是优越的,因为它允许灵活地仅编译应用程序或仅编译管理员,而不是在仅更改一个时强制您编译两者。我可以同时运行 yarn start-app
和 yarn start-admin
,并在不同端口上运行单独的应用程序。
关于reactjs - 创建 React App V2 - 多个入口点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55308657/
通常入口重写目标的工作原理如下: nginx.ingress.kubernetes.io/rewrite-target: / 这将重写服务名称的目标,因为它们在根目录中。所以如果我有这个: apiVe
我正在使用 Helm 部署的 GKE (1.8.5-gke.0) 上运行 traefik 入口 Controller 。我观察到的是请求经常得到 404 响应。 看起来 traefik 会不断重新加载
是否可以在没有负载均衡器的情况下在 Kubernetes 中使用 Ingress Controller 功能(在 Digital Ocean 中)。 有没有其他机制可以让域名映射到Kubernetes
我使用 KOPS 和 nginx-ingress 在 AWS 上部署了 Kubernetes。 为了评估多个云(并削减成本),我想在 GKE 上进行部署。一切正常,除了该死的 Ingress。 (这是
要求:想要使用带有 HTTPS 的入口部署 Minio 和另一个后端服务(不用于生产目的) 我一直在尝试创建一个入口以从 GKE 中的 Kubernetes 集群外部访问两个服务。这些是我尝试过的尝试
我对使用漏斗可视化功能的谷歌分析有点坚持。 输入漏斗可视化时,它会显示带有数字的“(入口)”。 这代表什么? 最佳答案 这表示在漏斗中第一步所代表的特定页面或一组页面上进入您网站的人数。 关于goog
我尝试在我的 kubernetes 集群上配置入口。我关注了documentation安装入口 Controller 并运行以下命令 kubectl apply -f https://raw.gith
我无法连接到使用 nginx 入口运行的应用程序(Docker Desktop win 10)。 nginx-ingress Controller pod 正在运行,应用程序运行良好,并且我创建了一个
我试图弄清楚如何使用具有某些特定规则的 nginx 代理缓存。例如,当我托管 Ghost 或 Wordpress 时,我不想缓存管理部分。使用服务器片段,我尝试了很多不同的组合,但在管理部分的缓存仍然
我正在尝试将AKS入口的IP列入白名单。我目前正在使用未随Helm一起安装的ingress-nginx。 强制性kubernetes资源可以在here中找到 服务启动为: spec: extern
我的机构有防火墙设置,阻止了大部分外部端口,目前,我有内部 Linux 虚拟机,例如, http://abc.xyz:5555 (此链接只能在内网访问),并且管理员设置了Netscaler,以便将内部
我正在尝试根据用户代理代理_传递流量。试图为它使用服务器代码段/配置代码段,但入口不允许我。 (禁止在 server-snippet 中使用 proxy_pass 并在 configuration-s
我已经使用 nginx-stable 安装了 nginx helm 图表和配置的入口规则如下。虽然它仅适用于根路径,如下所示, /user/login - working /user/register
使用 KOPS 在 AWS 上部署 k8s。 我已经创建了 nginx 入口 https://github.com/kubernetes/ingress-nginx nginx-ingress-con
在我的聊天应用程序中,当一个用户将另一个人添加到他/她的联系人列表中时,服务器条目显示 BOTH 订阅,但在我的应用程序中,代码根据 TO/FROM 订阅工作(就像在接受 friend 请求之前一样)
我在 Python 中有一个实用程序模块,它需要知道正在使用它的应用程序的名称。实际上,这意味着被调用以启动应用程序的顶级 python 脚本的名称(即,其中__name=="__main__"为真)
在这种情况下,我将如何实现“OnButtonClick”以便在按下按钮时打印用户输入“e1”? from Tkinter import * class App: def __init__
我使用以下命令在本地生成 key 。 openssl genrsa -out testsvc.testns.ing.lb.xyz.io.key.pem 2048 并使用以下命令生成 CSR(证书签名请
我正在运行 mint 17.2 kde。 我通过在 ~/Downloads/中运行 idea.sh 安装了 intellij CE 然后我将 intellij 移动到/usr/lib/。现在,当我尝试
我无法让 Controller 工作。尝试了很多次,我仍然得到 Error: ImagePullBackOff。 有没有我可以尝试的替代方案或者它失败的原因? kubectl apply -f
我是一名优秀的程序员,十分优秀!