Cross-framework development system and method, electronic equipment and storage medium

Abstract

The invention provides a cross-framework development system and method, electronic equipment and a storage medium, the development system comprises a target packaging tool and at least two frameworks, and each framework comprises at least one ecological component; the target packaging tool is used for calling at least one ecological component; the at least two frames at least comprise a first frame and a second frame; the first frame at least comprises a first ecological component, and the second frame at least comprises a second ecological component; the first ecological component is used for introducing the second ecological component; and / or the second ecological component is used for quoting the first ecological component. According to the embodiment of the invention, the development system supports the simultaneous introduction of a plurality of frames in the same project, the pages of the plurality of frames can jump, nest and communicate with one another, and the ecological components of the plurality of frames can be mutually quoted.

Description

Technical Field

[0001] This application belongs to the technical field of development, specifically relating to a cross-framework development system, method, electronic device, and storage medium. Background Technology

[0002] In web front-end development, the use of frameworks is essential. Currently, popular JavaScript frameworks in the web technology field include React, Vue, and Svelte; however, developers can only choose between React, Vue, or Svelte when selecting a framework. Summary of the Invention

[0003] In view of the above problems, a cross-framework development system, method, electronic device, and storage medium are proposed to overcome or at least partially solve the above problems, including: A cross-framework development system, the development system comprising a target packaging tool and at least two frameworks, each framework including at least one ecosystem component; The target packaging tool is used to invoke the at least one ecosystem component; The at least two frameworks include at least a first framework and a second framework; the first framework includes at least a first ecological component, and the second framework includes at least a second ecological component. The first ecological component is used to reference the second ecological component; and / or, the second ecological component is used to reference the first ecological component.

[0004] In some embodiments, the first ecosystem component declares a first document object model reference, and the lifecycle callback function of the first ecosystem component adds the second ecosystem component to the first document object model reference; The second ecosystem component adds exported functions that reference the first document object model.

[0005] In some embodiments, the first ecosystem component declares a second document object model reference; the second document object model reference is used as the mount point of the second ecosystem component.

[0006] In some embodiments, the first ecosystem component declares a reference to a third document object model; the second ecosystem component declares a first mounted document object model that is added to the reference to the third document object model.

[0007] In some embodiments, the at least two frameworks further include a third framework, which includes at least one third ecosystem component; The first ecological component is used to reference the second ecological component; the second ecological component is used to reference the third ecological component.

[0008] In some embodiments, the at least two frameworks include: React framework, Vue framework, Svelte framework.

[0009] In some embodiments, the target packaging tool is Rspack.

[0010] This application also provides a cross-framework development method, applied to the development system described above, the method comprising: Invoke the first ecosystem component to perform the corresponding development processing; When the first ecosystem component is invoked, the second ecosystem component is invoked to perform the corresponding development processing.

[0011] This application embodiment also provides an optical module performance prediction device, the device comprising: This application also provides an electronic device, including a processor, a memory, and a computer program stored in the memory and capable of running on the processor. When the computer program is executed by the processor, it implements the cross-framework development method described above.

[0012] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the cross-framework development method described above.

[0013] The embodiments of this application have the following advantages: In this embodiment, the development system includes a target packaging tool and at least two frameworks, each framework including at least one ecosystem component. The target packaging tool is used to call at least one ecosystem component. The at least two frameworks include at least a first framework and a second framework. The first framework includes at least one first ecosystem component, and the second framework includes at least one second ecosystem component. The first ecosystem component is used to reference the second ecosystem component; and / or, the second ecosystem component is used to reference the first ecosystem component. Through this embodiment, the development system supports the simultaneous introduction of multiple frameworks in the same project, and the pages of multiple frameworks can jump to each other, nest with each other, and communicate with each other; the ecosystem components of multiple frameworks can reference each other. Attached Figure Description

[0014] The above and / or additional aspects and advantages of this application will become apparent and readily understood from the description of the embodiments taken in conjunction with the following drawings, in which: Figure 1 This is a schematic diagram of a nested component according to an embodiment of this application; Figure 2 This is a flowchart illustrating the steps of a cross-framework development method according to an embodiment of this application. Detailed Implementation

[0015] To make the above-mentioned objectives, features, and advantages of this application more apparent and understandable, the application will be further described in detail below with reference to the accompanying drawings and specific embodiments. Obviously, the described embodiments are only some, not all, of the embodiments of this application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0016] There are many massive applications in web development, all of which have complex build configurations. Building a production environment can take ten minutes or even more than half an hour; the development environment also takes more than ten minutes.

[0017] Developers had previously tried various methods to optimize these massive applications using webpack, but with little success. They realized that optimizations on webpack were no longer sufficient and that a fundamental overhaul was necessary to meet the demands of development.

[0018] Developers have the following requirements for build tools: 1. Fast Dev startup performance. npmrundev is a command that developers need to run many times a day, but large projects can take up to 10 minutes each time, which is very painful for engineers. Therefore, optimizing the startup time in development mode is crucial.

[0019] 2. High-efficiency build performance. `npm runbuild` is frequently used in CI / CD (Continuous Integration and Continuous Deployment) environments, and it determines the efficiency of application production delivery. Some applications require 20 to 30 minutes of build time in production environments; reducing this time would be very helpful for the development process.

[0020] 3. Flexible configuration. User project configurations are highly flexible and lack uniformity. In previous attempts to migrate webpack configurations to other build tools, we encountered many problems because the configurations of other build tools are not as flexible as webpack's.

[0021] 4. Production environment optimization capabilities. Before enabling Rspack, we tried various solutions within the community, but they all faced certain degrees of negative optimization in production environments, such as insufficiently granular bundling. Therefore, optimizing the production environment is a feature we cannot abandon.

[0022] Webpack is currently the most mature build tool, boasting a vibrant ecosystem, flexible configuration, and rich functionality. However, its most criticized aspect is its performance, especially in large projects where build times can reach several minutes or even tens of minutes. Performance is currently Webpack's biggest weakness. Therefore, Rspack addresses the core issue of Webpack's performance.

[0023] In web front-end development, the use of frameworks is essential. Currently, popular JavaScript frameworks in the web technology field include React, Vue, and Svelte. However, developers usually can only choose one framework when selecting technologies. Choosing React means that other frameworks such as Vue and Svelte cannot be used in the project, which also means that the project can only use the React ecosystem and cannot share the ecosystem components of other frameworks such as Vue and Svelte.

[0024] To address this, this application's embodiments are based on Rspack, a high-performance JavaScript bundling tool, which supports the simultaneous introduction of multiple frameworks in the same project. Furthermore, pages from multiple frameworks can navigate to each other, be nested within each other, communicate with each other, and their ecosystem components can reference each other.

[0025] In a first aspect, some embodiments of this application provide a cross-framework development system; the development system includes a target packaging tool and at least two frameworks, each framework including at least one ecosystem component; The target packaging tool is used to invoke at least one ecosystem component; At least two frameworks include at least a first framework and a second framework; the first framework includes at least one first ecosystem component, and the second framework includes at least one second ecosystem component. The first ecological component is used to reference the second ecological component; and / or, the second ecological component is used to reference the first ecological component.

[0026] In some embodiments, the cross-framework development system supports the simultaneous introduction of multiple frameworks in the same project, and the pages of multiple frameworks can jump to each other, nest with each other, communicate with each other, and the ecosystem components of multiple frameworks can reference each other.

[0027] The development system may include a target packaging tool and at least two frameworks that have mutual reference relationships.

[0028] A framework is a "business carrier" that developers directly operate. Its core goal is to enable developers to implement the system's UI interaction and business logic efficiently and in a standardized manner. Specific functions can include: providing a component-based development paradigm, simplifying UI rendering and interaction logic, managing state and data flow, and supporting cross-page and cross-platform scenarios.

[0029] The purpose of target development tools is to solve "how to make the code run"; as "behind-the-scenes engineering tools", the core objective of target development tools is to provide technical support for the development process, ensuring that the code written in the framework can run correctly, iterate efficiently, and be optimized for deployment. Specific functions can include: real-time compilation and development experience optimization, module management and dependency resolution, and integration of engineering processes.

[0030] In some embodiments of this application, at least two frameworks include: React framework, Vue framework, Svelte framework.

[0031] React is a library for building web and native user interfaces; Vue is a JavaScript framework for building user interfaces. It's built on standard HTML, CSS, and JavaScript, and provides a declarative, component-based programming model to help develop user interfaces efficiently. Whether the interface is simple or complex, Vue can handle it. Svelte is a tool for building rapid web applications.

[0032] In some embodiments of this application, the target packaging tool is Rspack.

[0033] Rspack is a high-performance JavaScript bundler written in Rust. It offers good compatibility with the webpack ecosystem, can seamlessly replace webpack, and provides faster build speeds.

[0034] In some embodiments of this application, each framework may include at least one ecosystem component. The core function of the ecosystem component (the supporting tools or libraries formed around the framework and tools) is to expand the capabilities of the core technology, solve specific scenario problems, reduce development costs, and make the entire technology system more complete and easier to use. Specifically, it can be divided into the following categories: expanding the functional boundaries of the core framework, optimizing engineering and development processes, solving business problems in vertical fields, and reducing technical barriers and learning costs.

[0035] For developers, ecosystem components can reduce repetitive work, allow them to focus on business logic, and improve development efficiency; for the technology system, they can upgrade core tools from "basic capabilities" to "complete solutions," covering all scenarios from simple pages to complex systems.

[0036] In some embodiments, the target packaging tool can be used to call at least one ecosystem component of different frameworks to complete code parsing and compilation; compared with relying on only one framework, this application can integrate ecosystem components from multiple frameworks to achieve more efficient development.

[0037] For example, the aforementioned at least two frameworks may include at least a first framework and a second framework; wherein the first framework may be any one of React, Vue, and Svelte, and the second framework may be another one of React, Vue, and Svelte besides the first framework.

[0038] For example, the first framework can be React and the second framework can be Vue; another example is that the first framework can be Vue and the second framework can be Svelte; yet another example is that the first framework can be Svelte and the second framework can be React. This application does not limit these aspects.

[0039] For example, Rspack can be configured as follows: (1) Supports React: `builtin:swc-loader` is a Rust version of `swc-loader` designed to provide better performance. The loader configuration is aligned with the JS version of `swc-loader`.

[0040] { / / Matches all files ending in .jsx (i.e., React JSX files) test: / \.jsx$ / , / / Specify the loader to use use: { / / Use Rspack's built-in swc compiler loader (performance is higher than babel-loader) loader: 'builtin:swc-loader', / / Configuration options for the SWC compiler options: { jsc: { parser: { / / Set the syntax parser type to ECMAScript (which can be understood as JavaScript) syntax: 'ecmascript', / / Enable JSX syntax parsing (to enable SWC to support React's JSX) jsx: true } } } }, / / Specify the module type as an automatically detected JavaScript module / / "javascript / auto" allows simultaneous support for both CommonJS and ES Module import methods. type: 'javascript / auto' }, This configuration code tells Rspack to use the built-in swc-loader to compile .jsx files, enable JSX support, and allow the module system to automatically recognize CommonJS and ES module formats. This is a typical JSX compilation configuration for a React project.

[0041] (2) Supports Vue: Vue Loader is a webpack loader that allows Vue components to be written in a format called Single File Components (SFCs).

[0042] { / / Matches all files ending with .vue (i.e., Vue single-file components) test: / \.vue$ / , / / Specify the loader to use / / vue-loader is used to parse and compile .vue files (i.e. <template>, <script>、<style>等部分）loader: 'vue-loader', / / 传递给vue-loader的配置选项options: { / / 启用实验性的inlineMatchResource功能 / / 作用：让vue-loader内部在处理<script>、<style>等块时， / / 可以使用Rspack的内联资源匹配逻辑，从而更好地支持资源依赖和构建优化experimentalInlineMatchResource: true}},这段配置代码告诉Rspack：当遇到.vue 文件时，使用 vue-loader 来解析Vue单文件组件，并启用一个实验性选项experimentalInlineMatchResource，以提升构建时对组件内部资源（如样式、脚本、图片等）的处理兼容性与性能。

[0043] （3）支持Svelte：svelte-loader是一个Webpack加载器，专门用于处理和编译Svelte组件。任何基于Svelte的Web应用程序都可以利用svelte-loader来编译和优化组件。

[0044] { / / 匹配所有以 .svelte 结尾的文件（即 Svelte 组件文件）test: / \.svelte$ / , / / 指定使用的加载器（loader） / / svelte-loader用于将.svelte文件编译为可在浏览器中运行的JavaScript代码， / / 它会处理模板、样式和脚本等部分，类似于Vue的vue-loader。

[0045] loader: 'svelte-loader'}这段配置代码告诉Rspack：当构建过程中遇到.svelte 文件时，使用 svelte-loader来编译这些文件，使得Svelte 框架的组件能够被正确解析和打包到最终的应用中。

[0046] 在本申请实施例中，第一框架至少可以包括一个第一生态组件；第一生态组件可以包括多个，多个第一生态组件可以为不同的生态组件，在本申请中，针对第一框架的生态组件即为第一生态组件。

[0047] 第二框架至少可以包括一个第二生态组件；第二生态组件可以包括多个，多个第二生态组件可以为不同的生态组件，在本申请中，针对第二框架的生态组件即为第二生态组件。

[0048] 在一些实施例中，第一生态组件与第二生态组件之间可以存在引用的关系；示例性的，第一生态组件可以在执行对应的开发处理的时候，引用第二生态组件，第二生态组件可以用于向第一生态组件提供对应的功能。

[0049] 另一示例中，第二生态组件可以在执行对应的开发处理的时候，引用第一生态组件，第一生态组件可以用于向第二生态组件提供对应的功能。

[0050] 又一示例中，第一生态组件可以在执行对应的开发处理的时候，引用第二生态组件，第二生态组件可以用于向第一生态组件提供对应的功能。且第二生态组件可以在执行对应的开发处理的时候，引用第一生态组件，第一生态组件可以用于向第二生态组件提供对应的功能。本申请实施例对此不作限制。

[0051] 在本申请实施例中，开发系统包括目标打包工具和至少两种框架，每种框架包括至少一个生态组件；目标打包工具，用于调用至少一个生态组件；至少两种框架至少包括第一框架和第二框架；第一框架至少包括一个第一生态组件，第二框架至少包括一个第二生态组件；第一生态组件，用于引用第二生态组件；和 / 或，第二生态组件，用于引用第一生态组件。通过本申请实施例，开发系统支持在同一个项目中同时引入多个框架，并且多个框架的页面之间可以互相跳转互相嵌套互相通信、多个框架的生态组件可以互相引用。

[0052] 在本申请的一些实施例中，第一生态组件中声明有第一文档对象模型引用，第一生态组件的声明周期回调函数中为第一文档对象模型引用添加有第二生态组件；第二生态组件添加有针对第一文档对象模型引用的被导出函数。

[0053] 在一些实施例中，在第一生态组件中使用第二生态组件，首先可以在第一生态组件中引入第二生态组件，在第一生态组件中声明一个第一文档对象模型引用（即第一DOM（Document Object Model，文档对象模型）引用）。

[0054] DOM是浏览器将HTML文档解析后形成的"对象树”，每个HTML元素（如、<button>）都会对应树中的一个"DOM节点对象”。

[0055] DOM引用指的是在JavaScript代码中获取到的、指向某个DOM节点对象的"内存地址”或"变量引用”。简单说，就是用一个变量"抓住”页面上的某个元素。

[0056] 在第一生态组件的声明周期回调函数中，可以为第一文档对象模型引用添加有第二生态组件；示例性的，可以在第一生态组件的onMounted声明周期回调函数中向该第一DOM引用添加第二生态组件。

[0057] 在一些实施例中，第一生态组件可以为Vue组件，第二生态组件可以为React组件；示例性的，在Vue组件中使用React组件，首先在Vue组件中引入React组件，在Vue组件中声明第一DOM引用，在Vue组件的onMounted声明周期回调函数中向该第一DOM引用添加React组件，相比普通React组件有所不同，被Vue引用的React组件需要额外改造：普通React组件导出的是一个返回JSX的函数，而被Vue引用的React组件需要导出一个返回DOM的函数，所以需要额外添加一个针对第一文档对象模型引用的被导出函数，被到处函数中创建一个DOM，利用React的createRoot钩子渲染普通React组件，最后返回DOM，这样就可以在Vue组件中使用React组件。

[0058] 示例性的，可以通过如下代码实现在Vue组件中使用React组件：（1）代码文件Example.vue<template><!--定义一个空的div，用于挂载React组件 -->< / template><script setup> / / 从Vue中导入组合式API：onMounted（生命周期钩子）与ref（响应式引用）import { onMounted, ref} from 'vue' / / 导入React组件封装函数（返回一个已渲染好的DOM节点）import ReactCom from '. / components / react.jsx' / / 声明一个Vue的ref，用于在模板中引用DOM元素const app = ref(null) / / 在组件挂载完成后执行的生命周期回调onMounted(() =>{ / / 向app所指向的DOM元素中添加 React 组件生成的DOM节点 / / ReactCom({ title: 'React in Vue'}) 返回的是一个已渲染好的React 根节点app.value.appendChild(ReactCom({ title: 'React in Vue'}))})< / script> This code dynamically inserts a React component into the Vue template by manipulating the DOM after the Vue component is mounted, achieving nested use of "Vue calling React".

[0059] (2) Code file React.jsx / / Import useState (state management hook) from React import React, { useState} from 'react' / / Import createRoot from react-dom / client to create the render root node for React 18. import { createRoot} from 'react-dom / client' / / Define a React component that accepts props as parameters function ReactCom(props) { / / Define a state variable count, initialized to 0 const [count, setCount] = useState(0) / / Define an event function to increment count when the button is clicked. const add = () =>{ setCount(count + 1) } / / Returns the JSX structure to be rendered return ( { / * Displays the passed-in title props.title and provides a button to show the current count * / } {props.title}: <button onclick="{add}"> {count}< / button> ) } / / By default, it exports a function that creates a React component instance and returns a DOM node. export default function (props = {}) { / / Create a new div element as the root node for React rendering. const domNode = document.createElement('div') / / Use React 18's createRoot to create a React rendering context const root = createRoot(domNode) / / Render the ReactCom component onto the newly created div. root.render(<ReactCom {...props} / > ) / / Returns the div node containing the rendered React component / / So that it can be mounted in Vue components via appendChild return domNode } This file encapsulates a React component as a regular function that returns a native DOM element.

[0060] In some embodiments of this application, a second document object model reference is declared in the first ecosystem component; the second document object model reference is used as the mount point of the second ecosystem component.

[0061] In some embodiments, a second document object model reference may be declared in the first ecosystem component; the second document object model reference may serve as the mount point of the second ecosystem component; the first ecosystem component may be a Vue component, and the second ecosystem component may be a Svelte component.

[0062] Using Svelte components in Vue is different from using React components in Vue. Svelte components themselves do not require any additional modification and are the same as ordinary Svelte components. In Vue components, you need to create a DOM (i.e., a second document object model reference), and then instantiate the Svelte component by using the DOM as the target parameter of the Svelte component. By specifying this DOM element as the "mount point", the compiled Svelte component is rendered into the DOM element, so that the content and logic of the component are associated with the actual DOM of the page. In this way, the DOM is rendered and the Svelte component is completed. Then, add the DOM to the Vue component to complete the use of React components in Vue.

[0063] In some embodiments, the Svelte component can be used in a Vue component using the following code: (1) Code file Example.vue <template> <!-- Vue template part --> <!-- Define an empty div for mounting the Svelte component --> < / template> <script setup> / / 从Vue导入onMounted（生命周期钩子）和ref（响应式引用）import { onMounted, ref} from 'vue' / / 导入Svelte组件（编译后是一个JS类，可通过new创建实例）import SvelteCom from '. / components / svelte.svelte' / / 创建一个新的div元素，用来作为Svelte组件的挂载目标const svelteEl = document.createElement('div') / / 实例化Svelte组件 / / target指定挂载的DOM元素 / / props用于给Svelte组件传递属性（类似于React / Vue的props）const svelteApp = new SvelteCom({target: svelteEl,props: {title: 'Svelte in Vue' / / 向Svelte组件传入title属性}}) / / 定义一个Vue的DOM引用，用于指向模板中的const app = ref(null) / / 当Vue组件挂载到页面后执行onMounted(() =>{ / / 将Svelte组件挂载的元素（svelteEl）插入到Vue的中 / / 从而在Vue页面中显示Svelte组件内容app.value.appendChild(svelteEl)})< / script> This code is in a Vue component: A Svelte component instance is created (by new SvelteCom(...)); It is rendered onto a separate div (svelteEl); Then this div is dynamically added to the ref node in the Vue template; "Embedding a Svelte component in Vue" is achieved.

[0064] (2) The code file svelte.svelte <script> / / 定义一个外部可传入的属性title，并设置默认值为'Svelte'export let title = 'Svelte'; / / 定义一个局部状态变量count，初始值为0let count = 0;< / script> <!-- Template part --> <!-- Display the title and add a button --> <!-- When the button is clicked, execute (count += 1), that is, increment count --> {title}: <button on:click="{()" => (count += 1)}>{count}< / button> This component is created and mounted in Vue, so its interaction logic is fully retained.

[0065] In some embodiments of the present application, a third Document Object Model reference is declared in the first ecological component; a first mounted Document Object Model added to the third Document Object Model reference is declared in the second ecological component.

[0066] In some embodiments, a third Document Object Model reference is declared in the first ecological component, and a first mounted Document Object Model added to the third Document Object Model reference is declared in the second ecological component.

[0067] Exemplarily, the first ecological component can be a React component, and the second ecological component can be a Vue component; when using a Vue component in a React component, first import the Vue component, then declare a DOM reference (i.e., the third Document Object Model reference), and in the useEffect hook of React, use the createApp of the vue framework to render the Vue component to obtain the mounted DOM (i.e., the first mounted Document Object Model), and then add the mounted DOM to the declared DOM reference.

[0068] In some embodiments, the following code can be used to implement using a Vue component in a React component: (1) The code file Example.jsx / / Import useState (state hook), useRef (DOM reference), useEffect (lifecycle hook) from React import React, { useState, useRef, useEffect} from'react' / / Import createRoot from react-dom / client to create the root node for React 18. import { createRoot} from 'react-dom / client' / / Import createApp from Vue to create and mount a Vue application instance. import { createApp} from 'vue' / / Import Vue components (which will be embedded into React components) import VueCom from '. / vue.vue' / / Define a React component ReactCom function ReactCom(props) { / / Define a state variable count and set its initial value to 0. const [count, setCount] = useState(0) / / Create a ref to reference a DOM element in React const divRef = useRef() / / Define a function to increment count when the button is clicked. const add = () =>{ setCount(count + 1) } / / useEffect is executed after the component is mounted, and it is executed only once (the second parameter is an empty array). useEffect(() =>{ / / Create a Vue application instance and render the Vue component VueCom onto a newly created div. / / Also pass props(title) as a property of the Vue component. const VueComEl = createApp(VueCom, { title: 'Vue in React'}) / / Mount it to a newly created div element .mount(document.createElement('div')) / / Get the root DOM element corresponding to the Vue instance (i.e., the DOM rendered by Vue). .$el / / Insert the Vue component's DOM element into the container pointed to by the React component's divRef. divRef.current.appendChild(VueComEl) }, []) / / Only executes when the component is first mounted / / Rendered content of React components return ( / / Bind ref to allow React to obtain the actual DOM node of this div { / * Displays the title passed from props and a clickable button * / } {props.title}: <button onclick="{add}"> {count}< / button> ) } / / Export a default function to generate a complete, mountable React component instance. export default function (props = {}) { / / Create a new div element to be used as the React root container const domNode = document.createElement('div') / / Use createRoot to create the React18 render root const root = createRoot(domNode) / / Render the ReactCom component onto this root node and pass in props root.render(<ReactCom {...props} / > ) / / Returns the rendered DOM node for insertion and use externally (e.g., in Vue or native environments). return domNode } This code dynamically creates a Vue component instance in React and manually mounts the DOM node rendered by the Vue component to a ref container of the React component, achieving the effect of "React calling Vue".

[0069] The two state systems are independent and do not interfere with each other.

[0070] (2) Code file vue.vue <template> <!-- Display the title property received from props --> <!-- When the button is clicked, the count increments and the interface updates automatically --> {{ props.title}}: <button @click="count++"> {{ count}}< / button> < / template> <script setup> / / 从Vue导入ref，用于声明响应式数据import { ref} from 'vue' / / 使用defineProps定义接收的外部属性（props）const props = defineProps({title: {type: String, / / 属性类型为字符串default: 'Vue' / / 默认值为 'Vue'}}) / / 定义一个响应式变量 count，初始值为0const count = ref(0)< / script> In some embodiments of this application, at least two frameworks also include a third framework, which includes at least one third ecosystem component; The first ecological component is used to reference the second ecological component; the second ecological component is used to reference the third ecological component.

[0071] In some embodiments, the framework in the development system may include a third framework in addition to the first and second frameworks; for example, the first framework may be the React framework, the second framework may be the Vue framework, and the third framework may be the Svelte framework, and this application embodiment does not limit this.

[0072] The third framework may include at least one third ecological component; the third ecological component may include multiple third ecological components, which may be different ecological components. In this application, the ecological component for the third framework is the third ecological component.

[0073] In the embodiments of this application, the first ecological component can be used to reference the second ecological component; the second ecological component can be used to reference the third ecological component, and so on.

[0074] For example, the development system can use React component B.jsx in Vue component A.vue, use Vue component C.vue in React component B.jsx, use Svelte component D.svelte in Vue component C.vue, and use Vue component E.vue in Svelte component D.svelte, and so on.

[0075] Reference Figure 1 The diagram illustrates a nested component according to an embodiment of this application; as shown below. Figure 1 As shown: In Vue component A, React component B can be used. React component B can be nested within Vue component C. Vue component C can be nested within Svelte component D. Svelte component D can be nested within Vue component E. Components from different frameworks can be nested into each other without any depth limit.

[0076] In related technologies, the use of the three frameworks React, Vue, and Svelte depends on the build system. Generally, only one framework's build system is selected. The mainstream build systems only support one framework at a time. For example, the most popular Vite build system, once the Vue framework is selected, cannot use the React ecosystem component library in the project system, and can only use the Vue ecosystem component library.

[0077] This application creates a novel and unique system based on Rspack, which supports the simultaneous introduction of React, Vue, and Svelte frameworks in the same build system, and supports the simultaneous use of React, Vue, and Svelte ecosystem component libraries in the project system.

[0078] Secondly, in some embodiments of this application, a cross-framework development method is provided; specifically, refer to... Figure 2 , Figure 2 A flowchart illustrating the steps of a cross-framework development method according to an embodiment of this application is shown.

[0079] like Figure 2 As shown, this cross-framework development method may include the following steps: Step 201: Call the first ecosystem component to perform the corresponding development processing.

[0080] Step 202: When calling the first ecosystem component, call the second ecosystem component to perform the corresponding development processing.

[0081] In some embodiments, based on the foregoing design of the development system, the development system mentioned in this application supports the simultaneous introduction of multiple frameworks in the same project, and the pages of multiple frameworks can jump to each other, nest with each other, and communicate with each other; the ecosystem components of multiple frameworks can reference each other. Based on this, the development system of this application can call the first ecosystem component to perform corresponding development processing, and when calling the first ecosystem component, it calls the second ecosystem component to perform corresponding development processing.

[0082] For example, when referencing a React component, the React component can reference a Vue component; in another example, when referencing a React component, the React component can reference a Svelte component, and so on. This application does not impose any restrictions on this.

[0083] In this embodiment, a first ecosystem component is invoked to perform corresponding development processing; when invoking the first ecosystem component, a second ecosystem component is invoked to perform corresponding development processing. Through this embodiment, the development system supports the simultaneous introduction of multiple frameworks within the same project, and the pages of multiple frameworks can navigate to, nest, and communicate with each other; the ecosystem components of multiple frameworks can reference each other.

[0084] It should be noted that, for the sake of simplicity, the method embodiments are all described as a series of actions. However, those skilled in the art should understand that the embodiments of this application are not limited to the described order of actions, because according to the embodiments of this application, some steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also understand that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of this application.

[0085] Thirdly, in some embodiments of this application, an electronic device is provided, including a processor, a memory, and a computer program stored in the memory and capable of running on the processor, wherein the computer program, when executed by the processor, implements the cross-framework development method described above.

[0086] Fourthly, in some embodiments of this application, a computer-readable storage medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, it implements the cross-framework development method described above.

[0087] For embodiments of electronic devices and storage media, since they are basically similar to those of method embodiments, the description is relatively simple, and relevant details can be found in the description of the method embodiments.

[0088] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.

[0089] Those skilled in the art will understand that embodiments of this application can be provided as methods, apparatus, or computer program products. Therefore, embodiments of this application can take the form of entirely hardware embodiments, entirely software embodiments, or embodiments combining software and hardware aspects. Furthermore, embodiments of this application can take the form of computer program products implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0090] This application describes embodiments with reference to flowchart illustrations and / or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of this application. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing terminal device to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal device, generate instructions for implementing the flowchart illustrations. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0091] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing terminal device to operate in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0092] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal equipment, causing a series of operational steps to be performed on the computer or other programmable terminal equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable terminal equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0093] Although preferred embodiments of the present application have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of the embodiments of the present application.

[0094] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or terminal device that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or terminal device. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or terminal device that includes said element.

[0095] The above provides a detailed description of a cross-framework development system, method, electronic device, and storage medium. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the above embodiments are only for the purpose of helping to understand the method and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.< / template>

Claims

1. A cross-framework development system, characterized in that, The development system includes a target packaging tool and at least two frameworks, each of which includes at least one ecosystem component; The target packaging tool is used to invoke the at least one ecosystem component; The at least two frameworks include at least a first framework and a second framework; the first framework includes at least a first ecological component, and the second framework includes at least a second ecological component. The first ecological component is used to reference the second ecological component; and / or, the second ecological component is used to reference the first ecological component.

2. The development system according to claim 1, characterized in that, The first ecosystem component declares a reference to the first document object model, and the lifecycle callback function of the first ecosystem component adds the second ecosystem component to the reference to the first document object model. The second ecosystem component adds exported functions that reference the first document object model.

3. The development system according to claim 1, characterized in that, The first ecosystem component declares a reference to a second document object model; the second document object model reference is used as the mount point of the second ecosystem component.

4. The development system according to claim 1, characterized in that, The first ecosystem component declares a reference to a third document object model; the second ecosystem component declares a first mounted document object model that is added to the reference to the third document object model.

5. The development system according to claim 1, characterized in that, The at least two frameworks also include a third framework, which includes at least one third ecosystem component; The first ecological component is used to reference the second ecological component; the second ecological component is used to reference the third ecological component.

6. The development system according to any one of claims 1-5, characterized in that, The at least two frameworks include: React framework, Vue framework, Svelte framework.

7. The development system according to any one of claims 1-5, characterized in that, The target packaging tool is Rspack.

8. A cross-framework development method, characterized in that, Applied to the development system as described in any one of claims 1-7, the method comprises: Invoke the first ecosystem component to perform the corresponding development processing; When the first ecosystem component is invoked, the second ecosystem component is invoked to perform the corresponding development processing.

9. An electronic device, characterized in that, It includes a processor, a memory, and a computer program stored in the memory and capable of running on the processor, wherein the computer program, when executed by the processor, implements the cross-framework development method as described in claim 8.

10. A computer-readable storage medium, characterized in that, A computer program is stored on the computer-readable storage medium, which, when executed by a processor, implements the cross-framework development method as described in claim 8.

Images