Modular import plugin for babel for server-side rendering. Also works for cjs to delete imported CSS to avoid compilation errors..
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';
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');
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';
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';"
As always, thanks to our amazing contributors!
Made with github-action-contributors.