https://github.com/rainx/assets
Javascript/Typescript assets management toolset
https://github.com/rainx/assets
Last synced: 6 months ago
JSON representation
Javascript/Typescript assets management toolset
- Host: GitHub
- URL: https://github.com/rainx/assets
- Owner: rainx
- Created: 2019-03-15T10:31:51.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:05:22.000Z (over 2 years ago)
- Last Synced: 2024-11-01T17:46:45.506Z (6 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.52 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- jimsghstars - rainx/assets - Javascript/Typescript assets management toolset (TypeScript)
README
# Assets
## Intro
Assets index generate toolset, this tool is used for Javascript/Typescript project to manage assets. It's idea is from Android resource management mechanism(`R.java`)
## Installation
```
> yarn global add assets-cli
```## Usage
```
Recursively generate index.ts files on src/assets direcotry> assets -v src/assets
or You could use nodemon to watch changes and regenerate it once new asset added
> yarn global add nodemon
For example: your asset files is under src/assets directory
> cat ./nodemon.json
{
"verbose": true,
"ignore": ["**/*.ts", "**/*.js"],
"watch": "./src/assets/",
"ext": "png,svg,xml.pdf,ico",
"exec": "assets -v src/assets"
}
> nodemon```
## Example
You has such a directory structure in you project.
```
assets
├── images
│ ├── banana.svg
│ └── orange.png
└── logo.png```
after processed by `assets tool`, it could add two `index.ts|js` files, it placed on each directory path.
```
assets
├── images
│ ├── banana.svg
│ ├── index.ts
│ └── orange.png
├── index.ts
└── logo.png
````index.ts` file in the root directory (assets) will be:
```javascript
import logoPng from "./logo.png";
import images from "./images";export default {
logoPng,
images
};
```and `index.ts` file in images directory will be:
```javascript
import bananaSvg from "./banana.svg";
import orangePng from "./orange.png";export default {
bananaSvg,
orangePng
};
```and then, if you wanna use images in your project. you just need to load `index.ts` in the root directory and then, you will get all references there(just like `R.java` in Android)
The following is a React Component as example:
```javascript
import assets from "../assets";const FriutList = () => {
return (
);
};
```