跨不同 NPM 工作区共享资产

Question

I have an NPM Workspaces React project and I want to create an 'assets' workspace from which all my workspaces can import images and other assets. The dir structure will look like this:

project/
├─ assets/
│  ├─ public/
│  │  ├─ logo.png
├─ package1/
├─ package2/

My question is: In the aforementioned example what would a recommended way to use logo.png in package1?

Answer 1

2 possible ways:

A. Serve whats in the assets/ dir with something like http-server . Load them in react app like CDN assets.

<img src="http://localhost:8888/assets/public/logo.png" alt="logo"/>

B. Init a package.json in assets/ with same name, so it becomes a workspace package. Then you can import from that package as a regular import.

import logo from 'assets/public/logo.png';

If direct asset import is supported (for example nextjs), then option B would work better.