我基本上想做一个poc
将我的主应用程序的某些部分提取到一个单独的包中。我已在我的 git 存储库中构建了一个示例单独包myapp-poc-ui https://github.com/prabhatmishra33/myapp-poc-ui/.
现在我正在尝试在我的main application.
package.json :
"dependencies": {
"myapp-poc-ui": "git+https://github.com/prabhatmishra33/myapp-poc-ui#master",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-scripts": "3.2.0"
},
我通过以下方式访问主应用程序中导出的模块:
import React from 'react';
import './App.css';
import { HelloWorld } from "myapp-poc-ui";
import { LazyComponent } from "myapp-poc-ui";
function App() {
return (
<div>
<HelloWorld />
<LazyComponent />
</div>
);
}
export default App;
问题:我的浏览器遇到问题
Uncaught SyntaxError: Unexpected token '<'
Uncaught (in promise) ChunkLoadError: Loading chunk 1 failed.
Hello World
已正确加载,但加载时出现此问题LazyComponent
.
我猜有问题webpack config file publicPath property
for myapp-poc-ui
也欢迎任何设计更改建议。
提前致谢。
所以问题就在这里,
每当 myapp-poc-ui 构建时,它都会创建
- 主入口文件
- 其余都是块文件
除非应用程序渲染,否则块文件不会在构建中自动加载。应用程序渲染后,它会调用块文件通过网络加载。您的客户端应用程序需要在本地主机上的服务器的公共或 dist 文件夹中拥有该块文件,除非我们将其从节点模块复制到公共,否则它无法自动获取该块文件。
您的模块已创建块,但客户端应用程序在创建客户端构建时不会自动加载/复制文件,如果我们将文件调用作为 myapp-poc-ui 的一部分,那么它就违背了使用延迟加载的目的。因此,一种方法是将节点文件复制到您的服务文件夹或构建文件夹中。
// i am using create-react-app as client and used react-app-rewired to
// overide cra webpack in config-overrides.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = function override(config, env) {
//do stuff with the webpack config...
config.plugins = [
new CopyWebpackPlugin([
{
context: 'node_modules/myapp-poc-ui/dist/',
from: '*', to: '[name].[ext]', toType: 'template',
},
]),
...config.plugins,
];
console.log(config)
return config;
}
快乐编码:)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)