Component packaging method, device, equipment and storage medium

Abstract

The present application provides a component packaging method, device, equipment and storage medium, which can be applied to various scenarios such as cloud technology, artificial intelligence, smart transportation, and Internet of Vehicles. The method includes: adding an initial component file and an initial component import file to an initial component project file to obtain a target component project file; configuring an initial scenario configuration file based on the initial component import file to obtain a target scenario configuration file; adding a first target command to an initial compilation script file to obtain a first compilation script file; the first target command is used to instruct the generation of a component package adapted to a target scenario based on the target scenario configuration file; the target scenario is different from the preset scenario of the target framework; the target component project file is packaged based on the first compilation script file to obtain a first component package adapted to the target scenario. The present application can enable components created based on a target framework to be applicable to scenarios different from the preset scenarios of the target framework.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a component packaging method, apparatus, device, and storage medium. Background Art

[0002] Taro is an open cross-end and cross-framework solution that supports development using frameworks such as React / Vue / Nerv, allowing one code to be adapted to multiple ends. There are many different forms of ends on the market today, such as Web, ReactNative, mini-programs, and other ends. When business requirements require performance on different ends at the same time, the cost of writing multiple sets of code for different ends is obviously very high. Taro can achieve adaptation to multiple ends with only one set of code. In existing technologies, components created based on the Taro framework cannot be used in projects created outside the Taro framework after being packaged. Summary of the Invention

[0003] The technical problem to be solved by this application is to provide a component packaging method, device, equipment and storage medium, so that components created based on the Taro framework can be packaged and applied to projects created outside the Taro framework.

[0004] In order to solve the above technical problems, on the one hand, the present application provides a component packaging method, including:

[0005] Add the initial component file and the initial component import file to the initial component project file to obtain a target component project file; the initial component project file is generated based on the target framework, and the initial component project file includes an initial scene configuration file and an initial compilation script file;

[0006] The initial scenario configuration file is configured based on the initial component import file to obtain a target scenario configuration file; the initial component import file is a packaging entry file when packaging the target component project file;

[0007] Adding a first target command to the initial compilation script file to obtain a first compilation script file; the first target command is used to instruct to generate a component package adapted to a target scenario based on the target scenario configuration file; the target scenario is different from a preset scenario of the target framework;

[0008] The target component project file is packaged based on the first compilation script file to obtain a first component package adapted to the target scenario; the first component package includes a first component file corresponding to the initial component file and a first entry file corresponding to the initial component introduction file.

[0009] In another aspect, the present application provides a component packaging device, the device comprising:

[0010] A file adding module is used to add an initial component file and an initial component import file to an initial component project file to obtain a target component project file; the initial component project file is generated based on a target framework, and the initial component project file includes an initial scenario configuration file and an initial compilation script file;

[0011] A scenario file configuration module, configured to configure the initial scenario configuration file based on the initial component import file to obtain a target scenario configuration file; the initial component import file is a packaging entry file when packaging the target component project file;

[0012] a first command adding module configured to add a first target command to the initial compilation script file to obtain a first compilation script file; the first target command is configured to instruct generation of a component package adapted to a target scenario based on the target scenario configuration file; the target scenario is different from a preset scenario of the target framework;

[0013] The first packaging module is used to package the target component project file based on the first compilation script file to obtain a first component package adapted to the target scenario; the first component package includes a first component file corresponding to the initial component file and a first entry file corresponding to the initial component introduction file.

[0014] On the other hand, the present application provides a component packaging device, which includes a processor and a memory, wherein the memory stores at least one instruction or at least one program, and the at least one instruction or the at least one program is loaded and executed by the processor to implement the component packaging method as described above.

[0015] On the other hand, the present application provides a computer storage medium, which stores at least one instruction or at least one program, and the at least one instruction or at least one program is loaded by a processor and executes the component packaging method as described above.

[0016] The implementation of the embodiments of the present application has the following beneficial effects:

[0017] This application configures the initial scene configuration file based on the initial component introduction file to obtain the target scene configuration file. Based on the target scene configuration file, the target scene to which the component is adapted after packaging and the entry file when the component is packaged can be determined; a first target command is added to the initial compilation script file to obtain a first compilation script file, and the first target command is used to instruct the generation of a component package adapted to the target scene based on the target scene configuration file; based on the first compilation script file, the target component project file is packaged to obtain a first component package adapted to the target scene, and the target scene is different from the preset scene of the target framework; thereby avoiding the problem of resource waste caused by reconstructing the target project so that the target project can use the component created based on the target framework; at the same time, the component generated by packaging based on the modified configuration file also has the original properties of the target framework component. By modifying the configuration file, the component created based on the target framework can be applied to scenes different from the preset scenes of the target framework without affecting the original properties of the component, thereby improving the scope of use of the component generated based on the target framework and the flexibility of component use. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the technical solutions and advantages of the embodiments of the present application or the prior art, the following is a brief introduction to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0019] Figure 1 This is a flow chart of a component packaging method provided by an embodiment of the present application;

[0020] Figure 2 This is a flow chart of a method for component packaging based on a compiled script file provided in an embodiment of the present application;

[0021] Figure 3 This is a flow chart of another component packaging method provided by an embodiment of the present application;

[0022] Figure 4 This is a flow chart of another method for component packaging based on compiled script files provided in an embodiment of the present application;

[0023] Figure 5 This is a flow chart of a component application method provided by an embodiment of the present application;

[0024] Figure 6 This is a schematic diagram of the component application interface provided by the embodiment of the present application;

[0025] Figure 7This is a flow chart of a method for generating a target engineering file provided in an embodiment of the present application;

[0026] Figure 8 This is a schematic diagram of a Taro project and non-Taro project component packaging operation process provided by an embodiment of the present application;

[0027] Figure 9 This is a schematic diagram of a component packaging device provided in an embodiment of the present application;

[0028] Figure 10 This is a schematic diagram of a device structure provided in an embodiment of the present application. DETAILED DESCRIPTION

[0029] To make the objectives, technical solutions, and advantages of this application more clear, this application will be further described in detail below with reference to the accompanying drawings. It is clear that the embodiments described are only some of the embodiments of this application, and not all of them. All other embodiments obtained by persons of ordinary skill in the art based on the embodiments in this application without inventive effort are within the scope of protection of this application.

[0030] It should be noted that the terms "first", "second", etc. in the specification and claims of this application and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product, or server that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products, or devices.

[0031] First, the following explanations are given for the relevant terms involved in the embodiments of this specification:

[0032] Webpack: Webpack is a Node-based front-end resource loading / packaging tool. It will perform static analysis based on the module dependencies, and then generate corresponding static resources for these modules according to specified rules.

[0033] Typescript: TypeScript is a superset of JavaScript that extends JavaScript's syntax and provides methods to convert TypeScript to JavaScript. It provides static type checking at compile time through type annotations.

[0034] NPM: Node Package Manager. NPM is a package management tool installed with NodeJS. It can solve many problems in NodeJS code deployment. Common usage scenarios include the following:

[0035] 1. Allow users to download third-party packages written by others from the NPM server for local use.

[0036] 2. Allow users to download and install command-line programs written by others from the NPM server for local use.

[0037] 3. Allow users to upload their own packages or command line programs to the NPM server for others to use.

[0038] The NPM server can be a standalone physical server, a server cluster or distributed system consisting of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. The terminal can be, but is not limited to, a smartphone, tablet computer, laptop computer, desktop computer, smart speaker, smart watch, intelligent voice interaction device, smart home appliance, or in-vehicle terminal. The terminal and server can be connected directly or indirectly via wired or wireless communication, which is not limited in this application.

[0039] In the prior art, components created based on the Taro framework must be packaged and run in projects that are also created using the Taro framework, and cannot be run in projects created using non-Taro frameworks. For existing projects created using non-Taro frameworks, if you need to introduce components created using the Taro framework, you must first refactor the project, which will incur high costs and waste resources. If Taro is abandoned to be compatible with existing projects created using non-Taro frameworks, the components will also lose their cross-end functionality. In order to solve the problem in the prior art that components created based on the Taro framework cannot be run in projects created using non-Taro frameworks, this application provides a component packaging method, please refer to Figure 1 , the method may include:

[0040] S110. Add the initial component file and the initial component import file to the initial component project file to obtain a target component project file; the initial component project file is generated based on the target framework, and the initial component project file includes an initial scenario configuration file and an initial compilation script file.

[0041] In the embodiment of the present application, the initial component project file can be generated in advance based on the target framework. In this embodiment, the target framework is illustrated by taking Taro as an example. Specifically, the initial component project file is generated using the scaffolding provided by Taro; accordingly, the initial component project file may include some default files, such as the initial scene configuration file prod.j and the initial compilation script file package.json.

[0042] The initial component file may include the creation of corresponding business components based on specific business needs, as well as the component style introduction file ui.less. The business components can be placed in the src directory in the initial component project file. Specifically, the folder where the created components are located can be the components folder under the src directory. The components folder can be generated when the initial component project file is generated.

[0043] The style import file ui.less can import the style files of each component. For example, the style import file can contain the following instruction:

[0044] @import'. / components / Information / index.less'.

[0045] The initial component import file index.ts can import and export components. For example, the initial component import file can contain the following instructions:

[0046] import*as HeaderContentOrigin from'. / src / components / HeaderContent';

[0047] export let HeaderContent=HeaderContentOrigin.

[0048] S120. The initial scenario configuration file is configured based on the initial component import file to obtain a target scenario configuration file; the initial component import file is a packaging entry file when packaging the target component project file.

[0049] The initial scenario configuration file prod.j includes an entry configuration item and an output configuration item corresponding to the target scenario. The information of the entry configuration item in the initial scenario configuration file is modified to the initial component introduction file, and the information of the output configuration item is modified to the first output path to obtain the target scenario configuration file. For example, the initial scenario configuration file may include the entry configuration item of the H5-end application scenario. By modifying the default information of the entry configuration item of the H5-end application scenario, the component package generated by packaging the target scenario configuration file can be suitable for the H5-end application scenario. The first output path here is the path where the component file is packaged and the product is configured as dist. For example, the information of the H5-end entry configuration item is configured as plugin; so that when the target component project file is packaged based on the initial scenario configuration file prod.j, the packaged product entry file plugin.js corresponding to the initial component introduction file index.ts can be generated, and the entry file path of the product after packaging and release is dist / js / plugin.js.

[0050] S130. Add a first target command to the initial compilation script file to obtain a first compilation script file; the first target command is used to instruct to generate a component package adapted to a target scenario based on the target scenario configuration file; the target scenario is different from the preset scenario of the target framework.

[0051] In the embodiment of the present application, the target scenario may be a non-Taro scenario, and the preset scenario of the target framework may be a Taro scenario; the initial compilation script file may be a configuration description file in the initial component project file, with commands added to the scripts section; specifically, the first target command may be used to package the component into a component suitable for non-Taro scenarios, including the following instructions:

[0052] "build:taroless":"json-I-fpackage.json-e

[0053] 'this.name="@xxx / components-ui-taroless\"'&&json-I-fpackage.json-e

[0054] 'this.main="dist / js / plugin.js\"'&&npm runbuild:h5".

[0055] S140. Based on the first compilation script file, the target component project file is packaged as a component to obtain a first component package adapted to the target scenario; the first component package includes a first component file corresponding to the initial component file, and a first entry file corresponding to the initial component introduction file.

[0056] The first target command mentioned above includes the first component packaging command; please refer to Figure 2 , which shows a method for component packaging based on a compilation script file, which may include:

[0057] S210. Determine a first packager based on the first component packaging command included in the first compilation script file.

[0058] S220. Call the first packager, so that the first packager packages the target component project file based on the target scenario configuration file to obtain the first component package adapted to the target scenario.

[0059] Among them, the first packager uses the initial component import file in the target scene configuration file as the compilation entry file; the first component package is placed in the first output path.

[0060] According to the "npm runbuild:h5" contained in the above-mentioned first target command, it can be determined that the corresponding first packager is webpack compilation and packaging, so that webpack can be called to use npm runbuild:h5 for packaging and compilation, so that webpack packages the target component project files based on the configuration information in the target scenario configuration file. The folder where the component files are located after packaging is dist, and the component entry file is plugin.js.

[0061] Specifically, the target component project file also includes an initial compilation configuration file, which includes an entry configuration item and an output configuration item; see Figure 3 , which shows another component packaging method, which may include:

[0062] S310. Add the initial component file and the initial component import file to the initial component project file to obtain a target component project file; the initial component project file also includes an initial compilation configuration file, and the initial compilation configuration file includes an input configuration item and an output configuration item.

[0063] S320. Modify the information of the entry configuration item in the initial compilation configuration file to the initial component import file, and modify the information of the output configuration item to the second output path to obtain a target compilation configuration file.

[0064] The initial compilation configuration file is tsconfig.json. Change the entry configuration item to index.ts, which corresponds to the entry file for the compiled and packaged product. Change the output configuration item outDir to ts-dist, and place the compiled and packaged product in the ts-dist directory. This makes the entry file for the compiled and packaged product ts-dist / index.js, where index.js is the file after tsc compilation of index.ts. You can also configure the syntax configuration item target and the file exclusion item exclude in the initial compilation configuration file. Setting target to es5 compiles component files to es5 syntax; setting exclude to ts-dist excludes the folder containing the packaged product during the compilation process and does not compile the folder.

[0065] S330. Add a second target command to the initial compilation script file to obtain a second compilation script file; the second target command is used to instruct to generate a component package adapted to the preset scenario based on the target compilation configuration file.

[0066] S340. Based on the second compilation script file, the target component project file is packaged to obtain a second component package that is adapted to the preset scenario; the second component package includes a second component file corresponding to the initial component file, and a second entry file corresponding to the initial component introduction file.

[0067] The second target command can be used to package the component into a component suitable for Taro scenario, including the following instructions:

[0068] "build:taro":"json-I-fpackage.json-e

[0069] 'this.name="@xxx / components-ui-taro\"'&&json-I-fpackage.json-e

[0070] 'this.main=\"ts-dist / index.js\"'&&npm runbuild:h5&&npx tsc".

[0071] The second target command includes a second component packaging command; see Figure 4 , which shows another method for component packaging based on a compilation script file, which may include:

[0072] S410. Determine a second packager based on the second component packaging command included in the second target compilation script file.

[0073] S420. Call the second packager so that the second packager packages the target component project file based on the target compilation configuration file to obtain a target component package that is compatible with the preset scenario.

[0074] The second packager uses the initial component import file in the target compilation configuration file as the compilation entry file; and the second component package is placed in the second output path.

[0075] Similarly, according to the "npx tsc" contained in the above-mentioned second target command, it can be determined that the corresponding second packager is tsc compilation and packaging, so that tsc can be called for packaging and compilation, so that tsc packages the target component project file based on the configuration information in the target compilation configuration file. The folder where the component file is located after packaging is ts-dist, and the component entry file is ts-dist / index.js.

[0076] In addition, when packaging and generating component packages suitable for Taro scenarios, you can also compile and package the target component project files with webpack. After webpack compilation, a dist folder is generated. The dist folder contains a css folder, a js folder, and html. app.css is in the css folder; the app.css file is the file obtained after the ui.less file is compiled with webpack.

[0077] The component package obtained by this method can be applied to the preset scenario of the target framework, that is, the Taro scenario. Details similar to those in the above embodiment can be found in the above content and will not be repeated here.

[0078] Because the two scenarios correspond to different packages, the final packaged product published to the npm repository has different names and entry files. Therefore, the package.json file needs to be dynamically modified. Therefore, you need to pre-install the npm package json, which supports command modification of json files. By modifying the files property of the package.json configuration file, executing the compilation script, obtaining the corresponding product, modifying the package version number, and executing the npm publish command to publish the package to the npm repository. For the Taro scenario, the files ultimately published to the npm repository are dist / css / app.css and ts-dist; for non-Taro scenarios, the files ultimately published to the npm repository are dist / js / plugin.js and dist / css / app.css.

[0079] Therefore, the component package created based on the Taro framework in the embodiment of the present application can be run in a multi-terminal scenario of a Taro or non-Taro project.

[0080] See also Figure 5 , which shows a component application method, which may include:

[0081] S510. Display each component in the first component package.

[0082] S520. In response to the component dragging operation, determine application information of the dragged component in the target project.

[0083] S530. Generate the target project adapted to the target scenario based on the application information of the dragged component in the target project.

[0084] When applying related components, you can download the required component packages from the NPM server, display the components in the designer of the low-code platform, and generate the corresponding target project by dragging and dropping the components; for example Figure 6 In the , you can select the required components from the displayed basic components and drag them into the work area. The display interface in the work area can be the display interface of the running target project. By dragging and dropping the components, you can generate the corresponding target project.

[0085] Specifically, the application information of the dragged component includes the description information of the dragged component in the target project and the first entry file corresponding to the dragged component; the description information can be used to represent the position information and display size information of the component in the display interface of the target project. Figure 7 , which shows a method for generating a target engineering file, which may include:

[0086] S710. Based on the first entry file, import the dragged component from the first component file.

[0087] S720. Determine the display status of the introduced dragged component in the target project according to the description information.

[0088] S730. Based on the introduced dragged component and the display status of the introduced dragged component in the target project, generate the target project adapted to the target scene.

[0089] Dragging and dropping components on the low-code platform can generate a corresponding json configuration file. This json configuration file will describe what components should be used in the corresponding positions of the target project and the specific information of the components. When generating the target project, traverse the json configuration file to introduce the corresponding components. The introduction here can be based on the above-mentioned component entry file.

[0090] See also Figure 8 , which shows a schematic diagram of the component packaging process for Taro and non-Taro projects. For Taro projects, a new style file ui.less and a component entry file index.ts are added. The project files are compiled to generate the app.css file, which is the compiled version of the style file ui.less. The project files are compiled with Typescript to generate the product directory ts-dist. The packaging script is then executed to package the components based on the packaging script, app.css file, and ts-dist. For non-Taro projects, the webpack configuration is modified and webpack compilation is performed to generate the product directory dist. The components are then packaged based on the packaging script and the dist directory.

[0091] This application configures the initial scene configuration file based on the initial component introduction file to obtain the target scene configuration file. Based on the target scene configuration file, the target scene to which the component is adapted after packaging and the entry file when the component is packaged can be determined; a first target command is added to the initial compilation script file to obtain a first compilation script file, and the first target command is used to instruct the generation of a component package adapted to the target scene based on the target scene configuration file; based on the first compilation script file, the target component project file is packaged to obtain a first component package adapted to the target scene, and the target scene is different from the preset scene of the target framework; thereby avoiding the problem of resource waste caused by reconstructing the target project so that the target project can use the component created based on the target framework; at the same time, the component generated by packaging based on the modified configuration file also has the original properties of the target framework component. By modifying the configuration file, the component created based on the target framework can be applied to scenes different from the preset scenes of the target framework without affecting the original properties of the component, thereby improving the scope of use of the component generated based on the target framework and the flexibility of component use.

[0092] See also Figure 9 , an embodiment of the present application further provides a component packaging device, which may include:

[0093] A file adding module 910 is configured to add an initial component file and an initial component import file to an initial component project file to obtain a target component project file; the initial component project file is generated based on a target framework and includes an initial scenario configuration file and an initial compilation script file;

[0094] A scenario file configuration module 920 is configured to configure the initial scenario configuration file based on the initial component import file to obtain a target scenario configuration file; the initial component import file is a packaging entry file when packaging the target component project file;

[0095] A first command adding module 930 is configured to add a first target command to the initial compilation script file to obtain a first compilation script file; the first target command is configured to instruct generation of a component package adapted to a target scenario based on the target scenario configuration file; the target scenario is different from a preset scenario of the target framework;

[0096] The first packaging module 940 is used to package the target component project file based on the first compilation script file to obtain a first component package adapted to the target scenario; the first component package includes a first component file corresponding to the initial component file, and a first entry file corresponding to the initial component import file.

[0097] Furthermore, the initial scene configuration file includes an entry configuration item and an output configuration item corresponding to the target scene; the scene file configuration module 920 includes:

[0098] The first modification module is used to modify the information of the entry configuration item in the initial scenario configuration file to the initial component introduction file, and modify the information of the output configuration item to the first output path to obtain the target scenario configuration file.

[0099] Furthermore, the first target command includes a first component packaging command; the first packaging module 940 includes:

[0100] A first determining module, configured to determine a first packager based on the first component packaging command included in the first compilation script file;

[0101] a first calling module, configured to call the first packager, so that the first packager packages the target component project file based on the target scenario configuration file to obtain the first component package adapted to the target scenario;

[0102] Among them, the first packager uses the initial component import file in the target scene configuration file as the compilation entry file; the first component package is placed in the first output path.

[0103] Furthermore, the initial component project file also includes an initial compilation configuration file, and the initial compilation configuration file includes an input configuration item and an output configuration item;

[0104] The device further comprises:

[0105] A compilation file configuration module is used to modify the information of the input configuration item in the initial compilation configuration file to the initial component import file, and modify the information of the output configuration item to the second output path, to obtain a target compilation configuration file;

[0106] A second command adding module is used to add a second target command to the initial compilation script file to obtain a second compilation script file; the second target command is used to instruct to generate a component package adapted to the preset scenario based on the target compilation configuration file;

[0107] The second packaging module is used to package the target component project file based on the second compilation script file to obtain a second component package that is adapted to the preset scenario; the second component package includes a second component file corresponding to the initial component file, and a second entry file corresponding to the initial component introduction file.

[0108] Furthermore, the second target command includes a second component packaging command; and the second packaging module includes:

[0109] A second determining module, configured to determine a second packager based on the second component packaging command included in the second target compiled script file;

[0110] a second calling module, configured to call the second packager, so that the second packager packages the target component project file based on the target compilation configuration file to obtain a target component package adapted to the preset scenario;

[0111] The second packager uses the initial component import file in the target compilation configuration file as the compilation entry file; and the second component package is placed in the second output path.

[0112] Furthermore, the device further comprises:

[0113] A component display module, used to display each component in the first component package;

[0114] An application information determination module, configured to determine application information of the dragged component in a target project in response to a component drag operation;

[0115] The first generating module is configured to generate the target project adapted to the target scenario based on application information of the dragged component in the target project.

[0116] Furthermore, the application information of the dragged component includes description information of the dragged component in the target project and the first entry file corresponding to the dragged component;

[0117] The first generation module includes:

[0118] A component import module, configured to import the dragged component from the first component file based on the first entry file;

[0119] a display status determining module, configured to determine the display status of the introduced dragged component in the target project according to the description information;

[0120] The second generating module is configured to generate the target project adapted to the target scenario based on the introduced dragged component and the display status of the introduced dragged component in the target project.

[0121] The apparatus provided in the above embodiments can execute the method provided in any embodiment of the present application, and has the functional modules and beneficial effects corresponding to the execution of the method. For technical details not fully described in the above embodiments, please refer to the method provided in any embodiment of the present application.

[0122] This embodiment further provides a computer-readable storage medium, in which at least one instruction or at least one program is stored. The at least one instruction or at least one program is loaded by a processor and executed by any of the above methods of this embodiment.

[0123] According to one aspect of the present application, a computer program product or computer program is provided, the computer program product or computer program including computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform any of the methods described in the above embodiments.

[0124] Further, Figure 10 A schematic diagram of the hardware structure of a device for implementing the method provided in the embodiment of the present application is shown, and the device may participate in or include the apparatus provided in the embodiment of the present application. Figure 10As shown, the device 10 may include one or more (illustrated as 102a, 102b, ..., 102n in the figure) processors 102 (the processor 102 may include but is not limited to a processing device such as a microprocessor MCU or a programmable logic device FPGA), a memory 104 for storing data, and a transmission device 106 for communication functions. In addition, it may also include: a display, an input / output interface (I / O interface), a universal serial bus (USB) port (which may be included as one of the ports of the I / O interface), a network interface, a power supply and / or a camera. It will be understood by those skilled in the art that Figure 10 The structure shown is only for illustration and does not limit the structure of the above electronic device. Figure 10 More or fewer components than shown, or with Figure 10 Different configurations shown.

[0125] It should be noted that the one or more processors 102 and / or other data processing circuits described above may generally be referred to herein as "data processing circuitry". The data processing circuitry may be embodied in whole or in part as software, hardware, firmware, or any other combination thereof. In addition, the data processing circuitry may be a single independent processing module, or may be incorporated in whole or in part into any of the other components of the device 10 (or mobile device). As described in the embodiments of the present application, the data processing circuitry serves as a processor control (e.g., selection of a variable resistor terminal path connected to an interface).

[0126] The memory 104 can be used to store software programs and modules of application software, such as program instructions / data storage devices corresponding to the methods described in the embodiments of the present application. The processor 102 executes various functional applications and data processing by running the software programs and modules stored in the memory 104, that is, implementing the above-mentioned player preloading method or player operation method. The memory 104 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include a memory remotely located relative to the processor 102, and these remote memories may be connected to the device 10 via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0127] Transmission device 106 is configured to receive or transmit data via a network. A specific example of the aforementioned network may include a wireless network provided by the communications provider of device 10. In one embodiment, transmission device 106 includes a network interface controller (NIC), which can be connected to other network devices via a base station to enable communication with the Internet. In another embodiment, transmission device 106 may be a radio frequency (RF) module configured to communicate with the Internet wirelessly.

[0128] The display may be, for example, a touch screen liquid crystal display (LCD) that enables a user to interact with a user interface of device 10 (or mobile device).

[0129] Any of the above methods in this embodiment can be based on Figure 10 The device shown is implemented.

[0130] This specification provides method operation steps as described in the embodiments or flowcharts, but more or fewer operation steps may be included based on routine or non-creative work. The steps and order listed in the embodiments are only one way of executing the order of many steps and do not represent the only execution order. When an actual system or interrupt product is executed, it can be executed sequentially or in parallel according to the method shown in the embodiments or the drawings (for example, in a parallel processor or multi-threaded processing environment).

[0131] The structure shown in this embodiment is only a partial structure related to the scheme of the present application, and does not constitute a limitation on the device to which the scheme of the present application is applied. The specific device may include more or fewer components than shown, or combine certain components, or have different arrangements of components. It should be understood that the methods, devices, etc. disclosed in this embodiment can be implemented in other ways. For example, the device embodiment described above is only schematic. For example, the division of the modules is only a division of logical functions. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or unit modules.

[0132] Based on this understanding, the technical solution of this application, or the portion that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes a number of instructions for causing a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the method described in each embodiment of this application. The aforementioned storage medium includes: a USB flash drive, a mobile hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, etc., various media that can store program code.

[0133] Those skilled in the art may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed in this specification can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the above description has generally described the composition and steps of each example according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0134] As described above, the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the above embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the above embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A component packaging method, characterized in that: include: Add the initial component file and the initial component import file to the initial component project file to obtain the target component project file; The initial component project file is generated based on the target framework, and the initial component project file includes an initial scene configuration file and an initial compilation script file; Configuring the initial scene configuration file based on the initial component import file to obtain a target scene configuration file; The initial component import file is a packaging entry file when packaging the target component project file; Adding a first target command to the initial compilation script file to obtain a first compilation script file; The first target command is used to instruct to generate a component package adapted to the target scenario based on the target scenario configuration file; The target scene is different from the preset scene of the target framework; The target component project file is packaged based on the first compilation script file to obtain a first component package adapted to the target scenario; the first component package includes a first component file corresponding to the initial component file and a first entry file corresponding to the initial component introduction file.

2. A component packaging method according to claim 1, characterized in that: The initial scenario configuration file includes an input configuration item and an output configuration item corresponding to the target scenario; The configuring the initial scene configuration file based on the initial component import file to obtain the target scene configuration file includes: The information of the entry configuration item in the initial scenario configuration file is modified to the initial component introduction file, and the information of the output configuration item is modified to the first output path to obtain the target scenario configuration file.

3. A component packaging method according to claim 2, characterized in that: The first target command includes a first component packaging command; The step of packaging the target component project file based on the first compilation script file to obtain a first component package adapted to the target scenario includes: Determining a first packager based on the first component packaging command included in the first compilation script file; Invoking the first packager so that the first packager packages the target component project file based on the target scenario configuration file to obtain the first component package adapted to the target scenario; Among them, the first packager uses the initial component import file in the target scene configuration file as the compilation entry file; the first component package is placed in the first output path.

4. A component packaging method according to claim 1, characterized in that: The initial component project file also includes an initial compilation configuration file, and the initial compilation configuration file includes an input configuration item and an output configuration item; The method further comprises: Modify the information of the entry configuration item in the initial compilation configuration file to the initial component import file, and modify the information of the output configuration item to the second output path, to obtain a target compilation configuration file; Adding a second target command to the initial compilation script file to obtain a second compilation script file; the second target command is used to instruct to generate a component package adapted to the preset scenario based on the target compilation configuration file; The target component project file is packaged based on the second compilation script file to obtain a second component package that is adapted to the preset scenario; the second component package includes a second component file corresponding to the initial component file, and a second entry file corresponding to the initial component introduction file.

5. A component packaging method according to claim 4, characterized in that: The second target command includes a second component packaging command; The step of packaging the target component project file based on the second compilation script file to obtain a second component package adapted to the preset scenario includes: Determining a second packager based on the second component packaging command included in the second compiled script file; Invoking the second packager so that the second packager packages the target component project file based on the target compilation configuration file to obtain a second component package adapted to the preset scenario; The second packager uses the initial component import file in the target compilation configuration file as the compilation entry file; and the second component package is placed in the second output path.

6. A component packaging method according to claim 1, characterized in that: The method further comprises: Displaying each component in the first component package; In response to a component dragging operation, determining application information of the dragged component in a target project; Based on the application information of the dragged component in the target project, the target project adapted to the target scenario is generated.

7. A component packaging method according to claim 6, characterized in that: The application information of the dragged component includes description information of the dragged component in the target project and the first entry file corresponding to the dragged component; The step of generating the target project adapted to the target scenario based on the application information of the dragged component in the target project includes: Based on the first entry file, import the dragged component from the first component file; Determining a display status of the imported dragged component in the target project according to the description information; Based on the introduced dragged component and the display status of the introduced dragged component in the target project, the target project adapted to the target scene is generated.

8. A component packaging device, characterized in that: include: A file adding module is used to add the initial component file and the initial component import file to the initial component project file to obtain the target component project file; The initial component project file is generated based on the target framework, and the initial component project file includes an initial scene configuration file and an initial compilation script file; A scene file configuration module, configured to configure the initial scene configuration file based on the initial component import file to obtain a target scene configuration file; The initial component import file is a packaging entry file when packaging the target component project file; A first command adding module is used to add a first target command to the initial compilation script file to obtain a first compilation script file; The first target command is used to instruct to generate a component package adapted to the target scenario based on the target scenario configuration file; The target scene is different from the preset scene of the target framework; A first packaging module is configured to package the target component project file based on the first compilation script file to obtain a first component package adapted to the target scenario; The first component package includes a first component file corresponding to the initial component file and a first entry file corresponding to the initial component import file.

9. The device according to claim 8, characterized in that The initial scenario configuration file includes an input configuration item and an output configuration item corresponding to the target scenario; The scene file configuration module includes: The first modification module is used to modify the information of the entry configuration item in the initial scenario configuration file to the initial component introduction file, and modify the information of the output configuration item to the first output path to obtain the target scenario configuration file.

10. The device according to claim 9, characterized in that The first target command includes a first component packaging command; The first packaging module includes: A first determining module, configured to determine a first packager based on the first component packaging command included in the first compilation script file; a first calling module, configured to call the first packager, so that the first packager packages the target component project file based on the target scenario configuration file to obtain the first component package adapted to the target scenario; Among them, the first packager uses the initial component import file in the target scene configuration file as the compilation entry file; the first component package is placed in the first output path.

11. The device according to claim 8, characterized in that The initial component project file also includes an initial compilation configuration file, and the initial compilation configuration file includes an input configuration item and an output configuration item; The device further comprises: A compilation file configuration module is used to modify the information of the input configuration item in the initial compilation configuration file to the initial component import file, and modify the information of the output configuration item to the second output path, to obtain a target compilation configuration file; A second command adding module is used to add a second target command to the initial compilation script file to obtain a second compilation script file; the second target command is used to instruct to generate a component package adapted to the preset scenario based on the target compilation configuration file; The second packaging module is used to package the target component project file based on the second compilation script file to obtain a second component package that is adapted to the preset scenario; the second component package includes a second component file corresponding to the initial component file, and a second entry file corresponding to the initial component introduction file.

12. The device according to claim 11, characterized in that The second target command includes a second component packaging command; The second packaging module includes: A second determining module, configured to determine a second packager based on the second component packaging command included in the second compilation script file; a second calling module, configured to call the second packager, so that the second packager packages the target component project file based on the target compilation configuration file to obtain a second component package adapted to the preset scenario; The second packager uses the initial component import file in the target compilation configuration file as the compilation entry file; and the second component package is placed in the second output path.

13. The device according to claim 8, characterized in that The device further comprises: A component display module, used to display each component in the first component package; An application information determination module, configured to determine application information of the dragged component in a target project in response to a component drag operation; The first generating module is configured to generate the target project adapted to the target scenario based on application information of the dragged component in the target project.

14. The device according to claim 13, characterized in that The application information of the dragged component includes description information of the dragged component in the target project and the first entry file corresponding to the dragged component; The first generation module includes: A component import module, configured to import the dragged component from the first component file based on the first entry file; a display status determining module, configured to determine the display status of the introduced dragged component in the target project according to the description information; The second generating module is configured to generate the target project adapted to the target scenario based on the introduced dragged component and the display status of the introduced dragged component in the target project.

15. A component packaging device, characterized in that: The device includes a processor and a memory, wherein the memory stores at least one instruction or at least one program, and the at least one instruction or the at least one program is loaded and executed by the processor to implement the component packaging method according to any one of claims 1 to 7.

16. A computer storage medium, characterized in that The storage medium stores at least one instruction or at least one program, and the at least one instruction or the at least one program is loaded by a processor and executes the component packaging method according to any one of claims 1 to 7.

17. A computer program product, comprising computer instructions stored in a computer-readable storage medium; a processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the component packaging method according to any one of claims 1 to 7.

Images