common-js-library

KO | EN

gitlite — search

#python #react #typescript #go #android #deep-learning #linux #macos #java #windows #cli #kubernetes #security #pytorch

common-js-library

(★ 10)

learn how to make a reuse and common library

common-js-library 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# How to Create a Universal JavaScript Library for Any Framework

Creating a universal JavaScript library that performs well across frameworks requires a mix of best practices, modern tools, and attention to detail. This article will guide you through the process step-by-step, ensuring the result is professional, scalable, and performance-focused. We will use TypeScript and Rollup to achieve this.

## Step 1: Initialize a Git Repository

```bash
git init
```

Start by initializing a Git repository to version control your project. This ensures you can track changes, collaborate efficiently, and manage your codebase effectively.

## Step 2: Create a `.gitignore` File

```bash
touch .gitignore
```

Add common files and directories to `.gitignore` to avoid unnecessary clutter in your repository. Typical entries include:

```
node_modules/
dist/
*.log
.env
```

## Step 3: Initialize a TypeScript Configuration

```bash
npx tsc --init
```

This generates a `tsconfig.json` file. Customize it for your library:

```json
{
  
```

## Step 4: Initialize `package.json`

```bash
npm init -y
```

This creates a default `package.json`. Add metadata such as your library’s name, description, author, and license. For example:

```json
{
  "name": "my-universal-library",
  "version": "1.0.0",
  "description": "A performant, framework-agnostic JavaScript library.",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "clean": "rimraf dist",
    "build": "npm run clean && rollup -c",
    "prepublishOnly": "npm run build"
  },
  "license": "MIT"
}
```

## Step 5: Install Dependencies

```bash
npm install --save-dev @rollup/plugin-typescript rollup rimraf rollup-plugin-copy typescript tslib
```

These dependencies help manage TypeScript compilation, file copying, and bundling:

- **@rollup/plugin-typescript**: Handles TypeScript files in Rollup.
- **rimraf**: Cleans up files and directories.
- **rollup**: Bundles the library for distribution.
- **rollup-plugin-copy**: Copies files during the build process.
- **typescript**: TypeScript compiler.
- **tslib**: Runtime library for TypeScript helper functions.

## Step 6: Create Essential Project Files

```bash
touch LICENSE README.md CHANGELOG.md .npmignore
```

- **LICENSE**: Include your license details (e.g., MIT License).
- **README.md**: Write detailed instructions for users.
- **CHANGELOG.md**: Track changes for each version.
- **.npmignore**: Exclude unnecessary files from your npm package:

```
node_modules/
dist/
*.log
src/
```

## Step 7: Create the Source Directory

```bash
mkdir src
```

Add your main entry file:

```bash
touch src/index.ts
```

### Example Code for `src/index.ts`

To demonstrate functionality, let's add a simple utility function to `src/index.ts`:

```typescript
/**
 * Adds two numbers together.
 * @param a - The first number.
 * @param b - The second number.
 * @returns The sum of a and b.
 */
export function add(a: number, b: number): number {
  return a + b;
}

/**
 * Greets a user with a given name.
 * @param name - The name of the user.
 * @returns A greeting message.
 */
export function greet(name: string): string {
  return `Hello, ${name}!`;
}
```

This provides both a utility and a clear example of how to use the library.

## Step 8: Create the Rollup Configuration

```bash
touch rollup.config.js
```

Write the following Rollup configuration:

```javascript
i
```

## Step 9: Link Your Library Locally

```bash
npm link
```

This creates a global symlink for your library.

To use it in a project:

```bash
npm link my-universal-library
```

## Step 10: Build and Test

Build your library:

```bash
npm run build
```

Verify that the files in the `dist` directory are correct and test the library in different projects/frameworks.

### Example Usage

After linking, use the library in a consuming project:

```typescript
import { add, greet } from 'my-universal-library';

console.log(add(5, 7)); // Output: 12
console.log(greet('Sadhana')); // Output: Hello, Sadhana!
```

## Step 11: Publish Your Library

When satisfied, publish your library to npm:

```bash
npm publish
```

Ensure all necessary files are included by verifying your `.npmignore` and package contents.

---

common-js-library

common-js-library 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

common-js-library

common-js-library 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README