Simple Import Replacement

A script to replace relative imports with absolute imports in TypeScript, JavaScript, and CSS files.

Description

This script processes files in your current directory (or a specified one) and its subdirectories, converting relative import paths to absolute import paths. It supports ts, tsx, js, jsx, css, scss, less, and sass file extensions.

Installation

Local Installation

You can install the package locally as a development dependency:

npm install --save-dev simple-import-replacement

or using yarn:

yarn add --dev simple-import-replacement

Global Installation

You can install the package globally:

npm install -g simple-import-replacement

or using yarn:

yarn global add simple-import-replacement

Using npx

You can run the script directly using npx without installing it:

npx simple-import-replacement

Usage

Local Installation

Add a script to your package.json:

{
  "scripts": {
    "replace-imports": "simple-import-replacement"
  }
}

Run the script:

npm run replace-imports

or using yarn:

yarn replace-imports

Global Installation

Run the script directly:

replace-imports

Using npx

Run the script using npx:

npx simple-import-replacement

Additional Examples

Default behavior

Scan for **/*.{ts,tsx,js,jsx,css,scss,less,sass} files in the current directory and its subdirectories:

npx simple-import-replacement

Specify a root directory

npx simple-import-replacement --root-dir=/path/to/your/project/src

or

npx simple-import-replacement /path/to/your/project/src

Specify a root directory and custom file patterns

npx simple-import-replacement /path/to/your/project/src **/*.ts **/*.js **/*.css

Example

Suppose you have a project structure as follows:

/path/to/your/project/src/
├── com/
│   ├── test/
│   │   ├── foo/
│   │   │   ├── bar/
│   │   │   │   └── example.ts
│   │   │   └── another/
│   │   │       └── anotherThing.ts
│   └── components/
│       └── MyComponent.ts
│       └── styles.css

And your example.ts file contains the following imports:

import something from './something';
import anotherThing from '../another/anotherThing';
import React from 'react';
export { MyComponent } from '../../components/MyComponent';

And your styles.css file contains:

@import './variables.css';
@import '../components/common.css';

Running the script:

npx simple-import-replacement

will update example.ts to:

import something from 'com/test/foo/bar/something';
import anotherThing from 'com/test/foo/another/anotherThing';
import React from 'com/test/foo/bar/something';
export { MyComponent } from 'com/components/MyComponent';

and styles.css to:

@import 'com/test/foo/bar/variables.css';
@import 'com/components/common.css';

Supported File Types

The script now supports the following file types:

• TypeScript (.ts, .tsx)
• JavaScript (.js, .jsx)
• CSS (.css)
• SCSS (.scss)
• Less (.less)
• Sass (.sass)

It will process both import statements in TypeScript/JavaScript files and @import rules in CSS and other stylesheet files.

Contributing

Feel free to open issues or submit pull requests if you find bugs or have suggestions for improvements.

License

This project is licensed under the MIT License.