preface

Because the company’s multiple front-end projects have the same functional code, and there is no unified management. When a bug needs to be fixed in a certain function, the other projects need to modify the release version because they all use the same copy. After many projects, it creates a lot of time consumption. To solve this problem, there are currently three solutions:

  1. webpackuseexternal, package the common library intoumdFormat, usingscriptLabel introduction.
  2. federation moduleRemove the common library asshare module.
  3. Publish public libraries to privatenpm.
  1. external: It’s a very attractive plan, yesscriptLink import, modified public library publishing, reverse proxy set thisscriptNo caching, so even business code release is saved. But considering there will probably be many more packs, many morescript 在 html headFirst of all, it will make the page blank time longer, which is not conducive to reducing the first screen code volume. Therefore, the plan is not considered for the time being.
  2. federation module: only inwebpack5Available on, unfortunately, company projects are 4, otherwise preferredfederation moduleIf you are interested, you can gowebpackLearn about the official website.
  3. npm: Can be set as a private repository to ensure privacy, but need to deploy and maintain privatenpmThe common library code has been modified, and the business items still need to be modifiedpackageThe library version is then repackaged for distribution. But fortunately, I have less dependence on others, so I can set up a good service for others to reference, saving other colleagues’ time.

The body of the

For detailed configuration, please refer to Verdaccio’s official website

Install the Verdaccio image

docker pull verdaccio/verdaccio:4
Copy the code

Initialize configuration items

cd /path/for/verdaccio
mkdir conf && mkdir storage && mkdir plugins
cd conf
vi config.yaml
Copy the code

Write to the configuration

In config.yaml, the step up, write the following

storage: ./storage
auth:
    htpasswd:
        file: ./htpasswd
uplinks:
    npmjs:
        url: https://registry.npmjs.org/
packages:
    "@*/*":
        access: $all
        publish: $authenticated
        proxy: npmjs
    "**":
        proxy: npmjs
logs:
- { type: stdout, format: pretty, level: http }
Copy the code

Access/publish only if logins are authenticated. We recommend using the concept of user groups to define the list of users that can be pushed by trusted people. So the code for the package block above could look like this:

$user-group: user-a user-b user-c
packages:
    "@*/*":
        access: $all
        publish: $user-group
        proxy: npmjs
    "**":
        proxy: npmjs
Copy the code

Start theVerdaccioThe container

V_PATH=/path/for/verdaccio; docker run -d -it --restart=always --rm --name verdaccio \
  -p 4873:4873 \
  -v $V_PATH/conf:/verdaccio/conf \
  -v $V_PATH/storage:/verdaccio/storage \
  -v $V_PATH/plugins:/verdaccio/plugins \
  verdaccio/verdaccio:4
Copy the code

Access to the privatenpmWarehouse and register users

According to the previous step, set port 4873 exposed by the container to be accessed in the browser. If it is opened successfully, the NPM service has been started successfully.

// Register NPM adduser --registry http://{deployed IP}:4873 // Login NPM login --registry http://{deployed IP}:4873Copy the code

Publish a package

Take a simple test package as an example

  1. useyarnInitialize the project. Recommended@xx/xxxIs used to name the package.
  2. createindex.jsI’m going to export a functionpackage.jsonThe main option should be set toindex.js.
  3. You can userollupPackage, but because it is a test package, simple function can not be used temporarily.
  4. release
NPM publish --registry http://{deployment IP}:4873Copy the code

The installation package

Set the localnpmWarehouse configuration

Specify the NPM repository corresponding to the use of @xx package space

NPM:

  • Create one in the project root directory.npmrc.@xxA customized package name prefix for this private repository, strictly package space (Scope)
registry=https://registry.npm.taobao.org @ xx: registry deploying IP} {= http:// : 4873Copy the code

yarn:

Registry "https://registry.npm.taobao.org" @ jf: registry "http://10.107.3.1:4873:4873"Copy the code

The installation

Yarn add @xx/ XXX or NPM install @xx/ XXXCopy the code

conclusion

Using Verdaccio makes it easier to deploy private NPM libraries. In this article, from service deployment to the completion of the package installation, I also step on some pits. I hope to share my experience from the pits.