background

As we develop components, we need to test the components we develop. But just testing in a development/documentation environment does not fully cover our usage scenarios in business development. Therefore, we need to test the build product.

Here’s a summary of the three options and talk about their characteristics.

Plan 1: direct release for testing

This approach best simulates our development scenario, which is:

After component development is complete, change the version number
yarn build

# publish
npm login
npm publish

# Then in the test project
yarn add my-component-package
# my-component-package comes from the name property in package.json in the component development directory
Copy the code

Using components:

import {Foo} from 'my-component-package';
export default() = ><Foo />;
Copy the code

This scheme is the most direct scenario for our daily use, but the disadvantage is that we may need to release the package frequently, which is not conducive to multi-party collaboration and package version management, and will greatly affect the efficiency of development and debugging.

However, you can also use a private deployment of Verdaccio to randomly distribute the version… However, such solutions are beyond the scope of this article

Scheme 2:npm link / yarn link

After using NPM link/YARN link in the component library, a soft link is set globally. Then we can import NPM link < PKG > in the test project directory. That is:

After component development is complete, change the version number
yarn build
yarn link
# or
# npm link

# Then in the test project
yarn link my-component-package
# or
# npm link my-component-package
Copy the code

After that, we can see our own my-component-package linked to the test project in node_modules in the test project directory.

For more details, see the NPM Link documentation and YARN Link documentation

This scenario links all files in our development directory (including node_modules) to our test directory, which can cause dependency conflicts, such as the common React version conflict problem.

So is there a way that we can:

  • Focus only on the artifacts after the component library is built
  • Independent of the source code and the configuration of the development environment
  • Use a similaryarn add <pkg>Install in the test directorypackage

And this is all done locally?

Scheme 3: UseyalcLocal debugging (recommended)

Yalc is a tool to simulate the NPM package distribution environment locally, official documentation.

Yalc primarily localizes an NPM repository, and yALC publish lets you publish your build locally. Yalc add < PKG > can achieve the effect of NPM install < PKG > or YARN add < PKG >.

Simple to use

  1. Install YALC globally

    yarn global add yalc
Copy the code

  2. In the component development directory

    # build package
yarn build

# release
yalc publish
Copy the code

  3. In the test project directory

    # quote package
yalc add my-component-package

Update dependencies that reference package
yarn
Copy the code

  4. When the code for the component is updated, CD it to the directory where the component was developed

    # build package
yarn build

# Update references in yALC
yalc push

If the component's dependencies are updated
yarn
Copy the code

  5. Remove the yALC installation package

    yalc remove --all
Copy the code

conclusion

Without affecting the version of the package in NPM or the company’s internal NPM:

  • Plan 1: This works, but at a cost: on-premise or cloud private deployment is similarverdacciosuchnpm packageManagement program; Of course you can use itdocker 。
  • Scheme 2: Personally feel more suitable for developing some usejsPackages that are straight out, or without dependencies (e.g., common configuration, @types).
  • Plan 3: Generally speaking, the current excellent solution has been solvedyarnOne of theissuesQuestions raised.Low cost, more recommended!

Reference documentation

  • Implementation of automatic process for local development and debugging of front-end component library
  • yalcThe official documentation
  • Use Yalc for component library debugging in a project
  • Verdaccio · An open source lightweight NPM private server