preface

Recently, the team has been implementing the micro front end. After early exploration, a draft has been drawn up gradually, and now we start to implement it one by one according to the draft. This article is about how to realize the sharing of micro front end, mainly talking about git submodule, one of the implementation methods

Sharing way

  • npm

    • Since our code needs to be kept secret, we can only build an internal package management tool similar to NPM, but we may need other people’s help, and it is a waste of time to go through the process
    • Making an NPM plugin requires writing a reasonable WebPack configuration, and our shared files have functions, components, and styles that are more complex

  • CDN

    Same as above

  • git submodule

    After our inquiry, git submodule can do such a thing, in the front end realize there was this solution, but also have the team to use his online, and he doesn’t need any extra people and resources to achieve, just front could do, is to learn a little cost, the following will talk about the use of specific processes

What is git Submoudle

Borrow a passage from the Internet, the general description is as follows

We often encounter situations where a project at work needs to include and use another project. It may be a third-party library, or one you developed independently for multiple parent projects. Now here’s the problem: you want to treat them as two separate projects, but you want to use the other in one project.

Git solves this problem with submodules. Submodules allow you to use one Git repository as a subdirectory of another Git repository. It allows you to clone another repository into your own project while keeping the commits separate.

Using the process

Git Submodule now that we know about it, let’s focus on how to use it

Scenario 1

You need to create a new parent project that contains child projects

First I created a share subproject on GitLab as our shared project (submodule)Then we create a new parent project microFront3 on GitLab as follows

You have a parent project, you have a subproject, so what you do is you put a file in the parent project, and then you introduce the subproject

  • Parent project file

  • How do you reference the subproject? Use the following command

git submodule add xxxxxxx.git shares-folder

Let’s see what happens when we execute the shares-folder command

We find that the folder name is not the desired shares-folder, but share. Why is this? Is it because we did not write the file name when executing the command by mistake

So now the subproject is not what we want, we need to delete and re-create one, but the subproject deletion is not so simple, the following to operate under the Internet often said that delete subproject steps, but many articles do not have the actual operation is not easy to understand, now to try

  • The first step is to right-click and delete both files (share,.gitmodules).

The file is gone, but when we run the add command again, we get the following error

Maybe not, but we’re looking at the git status results

Git submodule add xx = git submodule add xx = git submodule add xx = git submodule add xx = git submodule add XX = git submodule add XX = git submodule add XX = git submodule add XX

git rm –cache .gitmodule

git rm –cache share

Let’s see what happens when we’re done

Ok, that’s it, we’re going to execute the add command

This time it worked but there was a small problem. What was the problem? The reason why this time is successful is because the previous folder name was SHARE, and now it is shares-folder. If the two file names are the same, there is still a problem

If we want to pull it successfully, we need to change the name. That’s why the first operation just succeeded, because the name of share and shares-folder are different. But this time, how to solve the problem

rm -rf .git/modules/shares-folder

Then run the add subproject command again to view the result

This time we found success

  • conclusion

Deleting a submodule

1: Right-click or run the delete command to delete the folder

Git rm –cache. Gitmodules, git rm –cache folder name

3: rm -rf. git/modules/ folder name

Git rm share: git rm. Gitmodules: git rm share: git rm

Okay, so the subproject has a readMe.md, and the parent project has a readme.md. We will now upload directly and run the command to the gitLab repository prompt. The result is as follows

Scenario 2

You need to clone warehouses that already have subprojects

Now that we’ve created microFront3 for our scenario, let’s use this project as an example. Create a microFront3-copy folder locally. The effect of direct cloning is as follows

We find that the folder does exist but there is no content in it, so we need other commands to do that

cd shares-folder

git submodule init git submodule update

Execute the above command to see the content, the effect is as follows

If you feel so troublesome, in the cloning time can also be a step in place, but the command needs to change, we try

git clone –recursive xxxxx.git

–recursive indicates that the parent project will be recursively cloned. Any child project detected in the parent project will be automatically cloned

Scenario 3

Child projects need to be modified and child projects in other parent projects need to be updated

Now to show you how to change subprojects, and how to update subprojects in other parent projects, my GitLab has previously created microFront2, I added a test. TXT file in the Shares-folder of microFront2, and then executed git status

instructions

  • Changes in a subproject need to be committed within the subproject, such as git add git commit

  • After the subproject is submitted, CD.. If you go to the parent project and check git Status, you will find that although the submodule has been committed, there is still a record of shares-Folder changes. This is normal

  • We found a problem after the parent directory was submitted

There is a hash value, which is the hash value of the last commit in the subdirectory

  • Recursive cloning is to obtain subitems based on this hash value

If the subproject is cloned to 79e9fd, you can also see that the subproject is on a stray branch (79e9fd). Note that the stray branch cannot be committed. Check the hash value for the last commit of the master branch, so just switch to the master branch directly. If you don’t understand this sentence, you can manually try it yourself, it may be better to understand a little

  • After submitting a subproject, be sure to submit the parent project as well

Update child projects in other parent projects

The above subproject has updated part of the code, but the other subprojects in the parent project are still old code (because there is no update), so how to update? Now that the subproject in microFront3 is old code, we can update it in two ways

Method 1

git submodule update –remote

This command updates the remote subproject to the local

Git status = git status = git status = git status

There is still a change. Why? If you don’t commit the latest hash value to GitLab, the next time you clone the hash to find the subproject, it will still be the old code

Method 2

cd shares-folder

git pull

Note that this needs to be operated in the subproject, the subproject submitted, directly CD.. Submit parent project

Scenario 4

Branch switching

The confusion of switching branches

  • If the parent project has a new branch, will the subproject also have a new branch
  • How does a subproject update its branch when it has always updated the master branch

Create a branch

This time we use microFront2, microFront3 project as an example, microFront3 created a new branch below, check the share repository

The parent project adds a test branch, but the subproject does not

The point at this point is that the parent project and the subproject are separate

The subproject creates a branch and updates it

Let’s create a branch test for the subproject, pull test from the microFron2 subproject and add new records, and commit in turn. The update operation performed on microFront3 is on test in the microFront3 subproject, but once the command is directly updated, it automatically jumps to the latest commit of the Master branch as follows

As you can see, these update commands only update the master, so it is recommended that public subprojects maintain a master branch, which saves a lot of work. What if you need to update the test branch? At this time, do you need to change the configuration as follows

git config -f .gitmodules submodule.shares-folder.branch test

Shares-folder is the file name and test is the branch name. After the execution, take a look at the configuration of

If the branch = test command does not take effect, you can add it manually and run git submodule update –remote

This had the desired effect, the code on the test branch was updated, and don’t forget to commit the home directory as well

conclusion

The above is the scenario of using Git submodule in my mind. Since our project only needs one subproject, it does not involve multiple subprojects. However, I feel that the operation is the same, but it is a little tedious