babel-plugin-direct-import

babel-plugin-direct-import


Babel plugin to cherry-pick ES module imports.

$3

``bash
npm install --save-dev babel-plugin-direct-import
`

$3

In

`javascript
import { Button, colors, ThemeProvider } from "@mui/material";
import {
ChevronLeft as ChevronLeftIcon,
ChevronRight as ChevronRightIcon,
} from "@mui/icons-material";
`

Out

`javascript
import Button from "@mui/material/Button/Button.js";
import * as colors from "@mui/material/colors/index.js";
import ThemeProvider from "@mui/system/esm/ThemeProvider/ThemeProvider.js";
import ChevronLeftIcon from "@mui/icons-material/esm/ChevronLeft.js";
import ChevronRightIcon from "@mui/icons-material/esm/ChevronRight.js";
`

$3

#### Via .babelrc (Recommended)

.babelrc

`json
{
"plugins": [
[
"babel-plugin-direct-import",
{
"modules": ["@mui/system", "@mui/material", "@mui/icons-material"]
}
]
]
}
`

#### Via Node API

`javascript
require("babel-core").transform("code", {
plugins: [
[
"babel-plugin-direct-import",
{
modules: ["@mui/system", "@mui/material", "@mui/icons-material"],
},
],
],
});
`

$3

##### Transformation of namespace imports:

Namespace imports are hard to analyze, that's why we skip them.

`jsx
import * as MUI from "@mui/material";

return (props) => ;
`

##### Mapping of variable exports:

`js
import * as colors from "./colors";

export const blue = colors.blue;
export const cyan = colors.cyan;
export const getDefaultColor = () => red;
`

$3

##### Material UI (v4)

`json
{
"plugins": [
[
"babel-plugin-direct-import",
{
"modules": [
"@material-ui/lab",
"@material-ui/core",
"@material-ui/icons",
"@material-ui/system"
]
}
]
]
}
`

##### Material UI (v5)

`json
{
"plugins": [
[
"babel-plugin-direct-import",
{
"modules": [
"@mui/lab",
"@mui/system",
"@mui/material",
"@mui/icons-material"
]
}
]
]
}
`

$3

#### Next.js

`js
// babel.config.js

module.exports = (api) => {
const target = api.caller((caller) => caller.target);

api.cache.using(() => JSON.stringify({ target }));

const presets = ["next/babel"];
const plugins = [];

// Enable optimizations only for the web bundle.
if (target === "web") {
plugins.push([
"babel-plugin-direct-import",
{ modules: ["@mui/lab", "@mui/material", "@mui/icons-material"] },
]);
}

return { presets, plugins };
};
`

$3

#### 0.5.0 to 0.6.0

After migration to Babel v7 it's impossible to pass arrays as configs, and now you have to pass an object with modules property:

Before:

`json
{
"plugins": [["babel-plugin-direct-import", ["@material-ui/core"]]]
}
`

After:

`json
{
"plugins": [
["babel-plugin-direct-import", { "modules": ["@material-ui/core"] }]
]
}
``

$3

- babel-plugin-date-fns
- babel-plugin-lodash
- babel-plugin-recharts
- babel-transform-imports
- babel-plugin-import