babel-plugin-transform-remove-imports

babel-plugin-transform-remove-imports

Modular import plugin for babel for server-side rendering. Also works for cjs to delete imported CSS to avoid compilation errors..

Usage

npm install babel-plugin-transform-remove-imports --save-dev

Via .babelrc or babel-loader.

{
  "plugins": [
    [
      "babel-plugin-transform-remove-imports", {
        "test": "\\.(less|css)$"
      }
    ]
  ]
}

// Input Code
import './index.less';
import './index.main.less';
import { Button } from 'uiw';
import { Select } from '@uiw/core';

// Output   ↓ ↓ ↓ ↓ ↓ ↓
import { Button } from 'uiw';
import { Select } from '@uiw/core';

Output Result

- import './index.less';
- import './index.main.less';
import { Button } from 'uiw';
import { Select } from '@uiw/core';

Support require

Via .babelrc or babel-loader.

{
  "plugins": [
    [
      "babel-plugin-transform-remove-imports", {
        "test": "@babel/core",
      }
    ]
  ]
}

// Input Code
require('@babel/core');
const jest = require('jest');

// Output   ↓ ↓ ↓ ↓ ↓ ↓
var jest = require('jest');

Output Result

- require('@babel/core');
- const jest = require('jest');
+ var jest = require('jest');

Options

• test: RegExp | string | (RegExp | string)[]

A regular expression to match the imports that will be removed. It could be a string or a RegExp object. You could also pass an array here.

• removeAll: boolean

Deletes all imports.

• remove?: 'effects'

Removing only side effects imports，Used with the test option. #3

// Input Code
import 'foo';
import Foo from 'foo';

// Output Code  ↓ ↓ ↓ ↓ ↓ ↓
import Foo from 'foo';

Programmatic Usage

import plugin from 'babel-plugin-transform-remove-imports'
import { transform } from 'babel-core'
 
function replace (code) {
  return transform(code, {
    babelrc: false,
    plugins: [
      [plugin, { test: /\.(less|css)$/ }]
    ],
  }).code;
}
 
replace("import './index.main.less';import { Button } from 'uiw';")
//=> "import { Button } from 'uiw';"

License

MIT © Kenny Wong & Slava Fomin II