在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:unadlib/fronts开源软件地址:https://github.com/unadlib/fronts开源编程语言:TypeScript 88.2%开源软件介绍:Fronts is a progressive micro frontends framework for building Web applications, and it's based on the module federation of Webpack. MotivationAmong the many micro frontends solutions, single-spa and Module Federation are the best of them. single-spa is a micro frontends framework based on router configuration. The centralization of configuration brings some limitations, such as it is difficult to granulate nestable micro frontends, module granularity control, module sharing, and so on. In 2019, Zack Jackson proposed and implemented Module Federation. Module Federation is a completely different concept from single-spa, and allows a JavaScript application to dynamically load code from another application. It completely solves the problem of code dependency sharing and runtime modularity. The idea is true - A game-changer in JavaScript architecture as mentioned in Zack Jackson's article. And it's currently supported by Webpack, Next.js, and Rollup. Although the Module Federation concept is so amazing, it has not yet gone further to provide a more complete and fully targeted micro frontends framework implementation, and this is what Fronts is trying to do. Features
Getting Started
Assuming you've completed these steps, let's get started with a quick taste of the wonderful micro frontends development of Fronts.
# with NPM
npm install fronts-react fronts-bundler
# or with Yarn
yarn add fronts-react fronts-bundler
We define
{
"name": "app1",
"exports": [],
"dependencies": {
"app2": "http://localhost:3002/remoteEntry.js"
}
}
{
"name": "app2",
"exports": ["./src/bootstrap"],
"dependencies": {}
} Wrap the Webpack config with const { createWebpackConfig } = require('fronts-bundler');
module.exports = createWebpackConfig(originalWebpackConfig);
import React from 'react';
import ReactDOM from 'react-dom';
import { boot } from 'fronts-react';
import App from './App';
export default function render(element) {
ReactDOM.render(<App />, element);
return () => {
ReactDOM.unmountComponentAtNode(element);
};
}
boot(render, document.getElementById('root'));
import React from 'react';
import { useApp } from 'fronts-react';
export const App = () => {
const App2 = useApp({
name: 'app2',
loader: () => import('app2/src/bootstrap'),
});
return <App2 />;
}; ExamplesAPIs
Built-in packagesThe most popular frontend frameworks are React, Vue and Angular. When the micro frontends uses one of these frameworks, it is recommended to use Fronts built-in package for this framework, such as
全部评论
专题导读
上一篇:mhdrare/Shovee-Frontend: Clone Shopee e-commerce built with React Native发布时间:2022-06-07下一篇:Advanced-Frontend/BetterJob-of-Frontend: 【BJF】你有故事我有酒,我有大厂前端岗内 ...发布时间:2022-06-07热门推荐
热门话题
阅读排行榜
|
请发表评论