babel-plugin-after
Babel plugin to add additional chunk info to asyncComponent() in Afterjs.
How It's Wokring
- search for import statements from these paths
'@deviousm/after'
and '@deviousm/after/asyncComponent'
- then it finds a local name for
asyncComponent
import statement
import { asyncComponent } from '@deviousm/after';
import { asyncComponent as foo } from '@deviousm/after';
import asyncComponent from '@deviousm/after/asyncComponent';
import foo from '@deviousm/after/asyncComponent';
import { asyncComponent as foo, After } from '@deviousm/after';
import { After } from '@deviousm/after';
import loader from '@deviousm/after/asyncComponent';
import { asyncComponent, After } from '@deviousm/after';
- then it searches for FunctionCalls that have these conditions:
- name of function that get called matches localname array
- that function act as value of property
- the name of property must be
component
import { asyncComponent } from '@deviousm/after';
{
component: asyncComponent({
loader: () =>
import(
`./pages/ProducDetail`
)
}),
}
{
component: asyncComponent({
loader: () =>
import(
`./pages/ProducDetail`
)
})
}
Examples
In
{
path: "/product/:name",
component: asyncComponent({
loader: () =>
import(
`./pages/ProducDetail`
)
})
}
Out
{
path: "/product/:name",
component: asyncComponent({
loader: () =>
import(
`./pages/ProducDetail`
)
chunkName: "pages-ProducDetail",
})
}
In
{
path: "/product/:name",
component: asyncComponent({
loader: () =>
import(
`./pages/ProducDetail`
)
})
}
Out
{
path: "/product/:name",
component: asyncComponent({
loader: () =>
import(
`./pages/ProducDetail`
),
chunkName: "HelloWorld",
})
}
In
const name = "SlimShady"
{
path: "/rap/god",
component: asyncComponent({
loader: () =>
import(
`./pages/${name}`
)
})
}
Out
const name = "SlimShady"
{
path: "/rap/god",
component: asyncComponent({
loader: () =>
import(
`./pages/${name}`
),
chunkName: name,
})
}
In
{
path: "/test",
component: asyncComponent({
loader: () =>
import(
`./pages/test`
),
chunkName: "my-custom-chunk-name",
})
}
Out
{
path: "/test",
component: asyncComponent({
loader: () =>
import(
`./pages/test`
),
chunkName: "my-custom-chunk-name",
})
}
In
{
path: "/test",
component: asyncComponent({
loader: () =>
import(
`./pages/test`
),
chunkName: "i-will-replace-magic-comment",
})
}
Out
{
path: "/test",
component: asyncComponent({
loader: () =>
import(
`./pages/test`
),
chunkName: "i-will-replace-magic-comment",
})
}
Installation
$ npm install babel-plugin-after --save-dev
or if you use Yarn like me:
$ yarn add -D babel-plugin-after
Usage
Via .babelrc
(Recommended)
.babelrc
{
"plugins": ["after"]
}
Options
prefix
: string (defaults: "") String used to append before chunkName
and webpackChunkName
.
{
"plugins": ["after", { "prefix": "MyPrefix-" }]
}
Via CLI
$ babel --plugins after script.js
Via Node API
require('babel-core').transform('code', {
plugins: ['after'],
});