preface

Years ago, I made a project similar to user portrait, which has independent functions and may be embedded by many projects as a functional module, so I naturally thought of making this project into a component output. Vue cli provides Library packaging mode Therefore, I only need to copy the packaged files to other projects after each development, so I can use them happily. However, with the increase of projects to reference this module and the development iteration of the project itself, this manual copy method is too stupid. Obviously, I need a mature package management scheme, but for various reasons, I can't publish the code to the public npm, so I can only build a private npm warehouse on the company's test server.

Next, I will record step by step how to build a private npm warehouse if I develop my own front-end package, upload my own front-end package, and finally download and reference my own front-end package.

1, Using lerna Management Pack

I won't introduce what lerna is. If you don't know, go and have a look Official website document

1. Global install lerna

   npm install lerna -g

2. Initialize project

   Create a folder and enter it to execute the following command:

   lerna init

   When finished, add it manually gitignore file, and the project directory is as follows:

   ├── .gitignore
   ├── lerna.json
   ├── package.json
   └── packages

3. create package

   lerna create @dede/app

   Create package here, you can create a package for development and management through multiple create commands.

   After completion, the project structure is as follows:

   ├── .gitignore
   ├── lerna.json
   ├── package.json
   └── packages
       └── app
           ├── README.md
           ├── __tests__
           │   └── app.test.js
           ├── lib
           │   └── app.js
           └── package.json

2, Using vite+vue3 development kit

I use Vue cli + vue2 in the actual project. Here I use vite+vue3 for demonstration. After all, vite is really fast!

Enter the / Dede cli / packages / APP directory and execute:

npm create vite@latest code -- --template vue-ts

After success, according to the vite document Library packaging chapter Configure:

// vite.config.ts
import { defineConfig } from 'vite'
const path = require('path')
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: './../dist',
    lib: {
      entry: path.resolve(__dirname, 'packages/index.ts'),
      name: 'app',
      fileName: (format) => `app.${format}.js`
    },
    rollupOptions: {
      // Be sure to externalize dependencies that you don't want packaged into the library
      external: ['vue'],
      output: {
        // In UMD build mode, a global variable is provided for these externalized dependencies
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
});

Because I use Vue TS template, I also need to install @ types/node:

npm i --save-dev @types/node

In the above configuration, my portal file is configured as follows:

entry: path.resolve(__dirname, 'packages/index.ts')，

Therefore, it is necessary to create a new package file in the code folder. The components we export are developed in this folder, and packages / index Ts should export an object containing the install method. Refer to vue plug-in development document.

After completion, the contents of our packages directory are as follows:

packages/
├── components
│   └── HelloWorld.vue
└── index.ts

HelloWorld is the component we want to output.

index. The TS code is as follows:

import { App, Component } from 'vue';

interface FileType {
    [key: string]: Component;
}

const componentFiles: Record<string, FileType> = import.meta.globEager('./components/**.vue');

const componentList = Object.keys(componentFiles).map(item => {
    return componentFiles[item]?.default;
});

export default {
    name: 'dedeUI',
    install(app: App) {
        componentList.forEach(component => {
            app.component(component?.name as string, component);
        });
    }
}

This is not over yet. We need to configure the package of @ dede/app JSON file, configure the export module:

{
  "name": "@dede/app",
  "version": "0.0.0",
  "description": "dede app",
  "keywords": [
    "app"
  ],
  "author": "",
  "homepage": "",
  "license": "ISC",
  "directories": {
    "lib": "lib"
  },
  "files": [
    "dist"
  ],
  "main": "./dist/app.umd.js",
  "module": "./dist/app.es.js",
  "exports": {
    ".": {
      "import": "./dist/app.es.js",
      "require": "./dist/app.umd.js"
    },
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },
  "publishConfig": {
    "access": "public"
  }
}

Then execute the packaging command npm run build, and you will see that a dist folder is generated under the / Dede cli / packages / APP directory, which is the file we need to export for packaging.

dist
├── app.es.js
├── app.umd.js
├── favicon.ico
└── style.css

At this time, everything is ready. In the next step, you can upload packages as long as you build a private npm warehouse.

3, Build npm private warehouse with verdaccio

If you have your own server, you can try it on your server.

After entering the server, install verdaccio and pm2. pm2 is mainly installed to manage node applications.

npm install verdaccio -g

npm install pm2 -g

After success, start verdaccio via pm2:

pm2 start verdaccio，

After success, you can access it through localhost:4873, and the port can be changed through the configuration file, which will not be discussed in detail here. After adding an account through promotion, you can contract.

4, Publish and install your own package

After applying for git code warehouse and adding remote warehouse successfully, add it in Dede cli directory npmrc file, configure npm registry as your private warehouse address:

registry=http://xxx/

git add .，git commit -m "project init"，

Then execute lerna publish and select the version number according to the semantic specification of semver version. After success, enter the verdaccio page and you can see the package you published.

After publishing successfully, enter the / Dede cli / packages / APP / code directory and execute npm install @dede/app --registry=http://xxx/ Install the package published by yourself, and then in main TS introduction:

import { createApp } from 'vue';
import '@dede/app/dist/style.css';
import dedeUI from '@dede/app';
import App from './App.vue';
const app = createApp(App);
app.use(dedeUI);
app.mount('#app');

On app Global component HelloWorld used in Vue component:

<template>
    <hello-world msg="Hello Vue 3 + TypeScript + Vite" />
</template>

<style>
#app {
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

Execute npm run dev to start the service, and the page appears perfectly~

summary

After this, you should also have a further understanding of the package management of npm. If your team has this demand, you might as well try it. After all, engineering is to reduce the risk of mistakes caused by manual operation and improve the efficiency of development and construction.