reactjs - 创建 React App V2 - 多个入口点
问题描述
我正在尝试构建一个具有 2 个入口点的 React 应用程序,一个用于应用程序,一个用于管理面板。
我从 Create React App V2 开始,并关注这个 gitHub 问题线程https://github.com/facebook/create-react-app/issues/1084和本教程http://imshuai.com/create-react-app -多入口点/。
我正在尝试移植从 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
它时,它不会抛出任何错误,Compiled successfully!
但它只是部分编译了应用程序而不是管理应用程序,没有 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
有谁知道我错过了什么才能使其正常工作?
解决方案
我意识到设置filename
为或不正确HTMLWebpackPlugin
,应该是。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
不同端口上运行的单独应用程序。
推荐阅读
- python - 数据框中的 Groupby 并将完整行列表传递给缩减函数
- responsive-design - 使用 bootstrap-vue 不会自动滚动
- php - 带有ajax响应的laravel
- visual-studio-code - vscode打不开文件
- algorithm - 搜索树并返回仅包括结果的树子集的高效算法
- django - 我可以使用 Django 的模板来启动 react JS 吗?
- mongodb - Mongoose 更新查询 - Mongoose/Mongodb
- ios - stackview 和 view 之间的约束失败
- java - 默认接口方法的辅助函数
- c# - 如何在 Json 中获取计数返回匿名对象