Nowadays, the front-end development cannot leave the basic modular, so many components share will become a more headaches, a lot of people are used to CTRL c and CTRL v, such easy to cause the project later period maintenance difficulties, of course, we also can’t so low, early in the project development I also explored several components sharing scheme.

The solution

Scheme 1 CDN/server

Using CDN to import components is probably the most significant solution to reduce the packaging time and access time, but the disadvantage is also very obvious, that is, when components are frequently updated, the CDN needs to be refreshed frequently.

Put packaged component files on the server. It is also inconvenient to update files on the server frequently.

Plan 2 is published to NPM

The earliest time I also put a lot of component files released to NPM, so that team members can easily get components resources, but the problem is also very obvious, first of all, the access speed of NPM is not stable, sometimes need some means of the Internet, second, frequently updated NPM, also can bring a long list of the version number, release is very trouble; However, when using a domestic mirror source, you need to wait for the mirror synchronization, which is time-consuming. As for publishing to NPM private, I suspect that most small and medium companies don’t have NPM private.

Scheme 3 uses git subModule

Git can use git submodules to place a Git repository directly in a project as a submodule

git submodule add <url> <path>
Copy the code

In the command, URL is the path of the submodule, and path is the directory path of the submodule. A major problem of this method is that the use of Git submodule is cumbersome, such as deletion, even without a special command, which must be completed by a series of operations. Finally, considering the acceptance of project team members, this scheme was abandoned.

Option 4 uses git addresses in package.json dependencies

This scheme is the best scheme THAT I am still using at present. There is no extra learning cost and it is easy to use after encapsulation. The following schemes will be introduced in detail.

Use the Vue-CLI project as an example. The React project works exactly the same.

File structure

The main file structure of the VUE project is shown below

├ ─ SRC | └ ─ components | └ ─ IframeCom | └ ─ index. The vue ├ ─ package. The json ├ ─ script. Js ├ ─ vue. Config. JsCopy the code

Components is placed in the SRC folder, IframeCom is one of the component folders, and index.vue is the exposed IframeCom component file.

Generate a script for the export entry

The script.js file is a script file for writing the export file. The content is as follows:

const fs = require('fs');
const path = require('path');

// Generate the export file
fs.readdir(path.join(__dirname, './src/components'), function (err, files) {
  if (err) {
     console.log('Directory does not exist')
     return
  }
  // Set the time to commit git
  let content = ` / *The ${new Date()}* / `
  let ex = []
  // Handle the export code
  files.forEach(item= > {
    // Read the directory name
    content = content + `import ${item} from './components/${item}'; `
    ex.push(item)
  })
  ex = ex.join(",")
  content = content + `export { ${ex} }; `

  fs.writeFile(path.join(__dirname, './src/index.js'), content, 'utf8', (err) => {
    if (err) throw err;
  });
})
Copy the code

perform

node script.js
Copy the code

Create an index.js file in the SRC directory, which is the entry to the exported component, with the following contents:

/*Tue Jun 09 2020 14:07:43 GMT+0800 (GMT+08:00)*/import IframeCom from './components/IframeCom';export { IframeCom }; 
Copy the code

Vue. Config. Js Settings

Since the components are generally less styled, they are packaged directly into JS and written in vue.config.js

module.exports = {
  css: { extract: false}};Copy the code

Package. The json Settings

Then write the package command in package.json:

{
  "name": "compoment-demo"."version": "0.1.2"."private": false."main": "lib/pikaz-compoment.umd.min.js"."scripts": {
    "lib": "vue-cli-service build --target lib --name pikaz-compoment --dest lib src/index.js"."serve": "vue-cli-service serve"."push": "node script.js && npm run lib && git add . && git commit -m 'commit' && git push"}}Copy the code

The lib command

"vue-cli-service build --target lib --name compoment-demo --dest lib src/index.js"
Copy the code

SRC /index.js SRC /index.js SRC /index.js SRC /index.js

Write another command to upload git repository (you must have previously connected to the remote repository)

"push": "node script.js && npm run lib && git add . && git commit -m 'commit' && git push"
Copy the code

That is, execute the script.js file to generate the library entry index.js file, then execute the command to package the library, and finally upload it to Git to simplify operations in one step.

Package. json setting for the main project

{
  "name": "project-demo"."version": "0.1.0 from"."private": true."scripts": {
    "serve": "vue-cli-service serve"."build": "npm install compoment-demo && vue-cli-service build"
  },
  "dependencies": {
    "compoment-demo": "git+https://github.com/pikaz-18/compoment-demo.git"."core-js": "^ 3.6.5." "."vue": "^ 2.6.11." "}}Copy the code

Add NPM install compoment-demo to install and update the dependencies in the dependencies section. Add NPM install compoment-demo to install the dependencies in the dependencies section.

Use of components in the main project

<template>
  <div class="demo">
    <iframe-com></iframe-com>
  </div>
</template>
Copy the code
<script>
import { IframeCom } from 'compoment-demo'
export default {
  name: 'App',
  components: {
    IframeCom
  }
}
</script>
Copy the code

Use it in the same way as a normal component

Project Demo address

Component library

Main Application Project

advantages

Biggest advantage is easy to use, components can upload packaging project executing a command, do not need to undertake additional operations, the main project can also be updated in real time when packaging component library, when using completely without awareness, and most companies have set up gitlab etc., to assemble cloud can also use the code, use cost is very low, Updates are also very fast.

The last

This is just a simple component sharing demo that you can refine according to your own project needs. You can take the whole project as a library export, will each page as basic components, which will free combination of multiple projects page into a saas system, and the scheme is not much invasive, reforming the old project is also easy, don’t have to worry about the boss wants to join a project have fretted about the function of the other projects, completely throw away without brain CV.

However, if the project is too large, this solution can also lead to problems such as long packaging time and bloated projects, which may require a micro front end.

Give it a like if you think it’ll help.