英文:
single-spa consume shared utility module in ember
问题
我想在React和Ember应用程序中使用single-spa，它们需要共享数据，我想使用https://single-spa.js.org/docs/module-types/#utilities 实用程序模块来公开可观察数据。
在React项目中，实用程序模块通过webpack的externals选项进行使用。
React的webpack配置:
module.exports = (webpackConfigEnv, argv) => {
const defaultConfig = singleSpaDefaults({
orgName: "company",
projectName: "react-app",
webpackConfigEnv,
argv,
});
return merge(defaultConfig, {
externals: {
"react": "react",
"react-dom": "react-dom",
// 实用程序模块
"@company/utility": "@company/utility"
}
});
};
在react中这样配置可以正常工作，但是Ember使用ember-cli/broccoli来构建应用程序，我不知道如何使用实用程序包，是否可能？或者使用npm发布包或在注册Ember微前端时通过props公开功能是唯一的方法，例如：
registerApplication(
"ember",
() => {
const appName = "ember";
const appUrl = `${domain}/ember/assets/ember.js`;
const vendorUrl = `${domain}/ember/assets/vendor.js`;
console.log({ appName, appUrl, vendorUrl });
return loadEmberApp(appName, appUrl, vendorUrl);
},
(location) => {
console.log(location.pathname.startsWith("/ember"))
return location.pathname.startsWith("/ember");
},
{ // 所有来自实用程序模块的数据应该在这里公开 }
);
英文:
I want to use single-spa with react and ember apps that will need to share data between them, I would like to use https://single-spa.js.org/docs/module-types/#utilities utility module for exposing observable data.
In react project utility module is consumed via webpacks externals option
reacts webpack:
module.exports = (webpackConfigEnv, argv) => {
const defaultConfig = singleSpaDefaults({
orgName: "company",
projectName: "react-app",
webpackConfigEnv,
argv,
});
return merge(defaultConfig, {
externals: {
"react": "react",
"react-dom": "react-dom",
// utility module
"@company/utility": "@company/utility"
}
});
};
And it works just fine in react, but ember uses ember-cli/broccoli for building an app and I don't know how to consume utility package, is it even possible? Or the only way to use package is to publish it via npm or expose functionality via props when registering ember mf in root-config for example:
registerApplication(
"ember",
() => {
const appName = "ember";
const appUrl = `${domain}/ember/assets/ember.js`;
const vendorUrl = `${domain}/ember/assets/vendor.js`;
console.log({ appName, appUrl, vendorUrl });
return loadEmberApp(appName, appUrl, vendorUrl);
},
(location) => {
console.log(location.pathname.startsWith("/ember"))
return location.pathname.startsWith("/ember");
},
{ // all data from utility module should be exposed here }
);
答案1
得分: 1
这将在接下来的几个月内可能实现，因为即将发布 embroider 的新版本（前提是你的应用程序已经兼容今天的 embroider）。
今天，你需要单独构建你的 Ember 应用，并将你的配置指向 ember-cli 输出的 dist 文件夹。
有关 embroider 的更多信息，这是从 broccoli 过渡到现代 JS 工具的工具，请参见此处：https://github.com/embroider-build/embroider/
英文:
this'll be possible in the next couple months, with an upcoming embroider release (provided your app is already compatible with today's embroider).
Today, you'll need to build your ember app separately, and point your config at the dist folder that ember-cli outputs.
For more information embroider, the tool for transitioning from broccoli to modern JS tooling, see here: https://github.com/embroider-build/embroider/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论