We usually front end is more than one project, but there is more than one project development at the same time, but often the code between multiple projects some public places, such as some of our components, the same place we met were generally can choose copy directly, but the problem is also very obvious, is changed, a place to go at the same time, other changes This is obviously not reasonable, did not achieve the purpose of reuse. To reuse code in such cases, I prefer to use NPM to manage our code.

First we create two projects, project1 and project2

vue create project1
vue create project2
Copy the code

BaseUI = BaseUI = BaseUI = BaseUI = BaseUI = BaseUI = BaseUI = BaseUI = BaseUI = BaseUI = BaseUI Then we usually define the following files:

lib // This directory contains the component files
.npmignore // This ignores the file
README.md // This is the project description document
package.json // This is the information description of the package
Copy the code

Note that our project and NPM package files are written together so that we can manage them closer to home. Because usually our components will change many times, we usually write business components that are not as stable as the element-UI components, so we don’t have to separate them for convenience. Git subtree: git subtree: git subtree: git subtree

git subtree push --prefix src/BaseUI origin base-npm
Copy the code

This command pushes all files in the SRC /BaseUI directory of the project to the base-npm branch. I push the specified folder directly from the master branch to the specified branch, so every time the project changes you just need to push the code again to the branch where the package is sent.

Then switch to the base-npm branch to execute the command of sending packets. NPM login completes the login and NPM publish completes. You can also go to the sending directory each time, rather than separate the sending directory into a separate branch.

At this point, we can install our NPM package in Project 2, and the components can be imported and used:

Introduce a component in isolation

import BaseButton from 'base-ui/lib/BaseButton'
Copy the code

Our components are in lib and can also be configured to load on demand, which requires the Babel plug-in

import { BaseButton } from 'base-ui'
Copy the code

Install the Babel plugin, NPM install babel-plugin-import –save-dev, and then modify the.babelrc file.

[
  "import",
    {
      "libraryName": "base-ui".// Point to your component library name
      "camel2DashComponentName": false.// default: true Disables case conversion}]Copy the code

Now only the components from project 1 are shared for project 2. If the components from project 2 also want to be used for project 1, you need to do the same. Define a package distribution directory in the project, pull the files into a separate branch, and then send the package.

So why should multiple projects be defined as multiple packages? Can’t it be defined as a bag? Git repository management is also possible. This is ok, but if the package directory is independent of the project, the biggest problem is that if you want to change a component, you need to change it in the package directory, send the package after the change, and then go to the project to install the package to see the effect, and then change it again and continue to send the package, which is very tedious.

Instead of using packages in both projects, it is recommended to use source files in one project and packages in one project for sharing purposes.

My test project address: GitHub address to connect