babel-plugin-transform-go1d-imports
Babel plugin to transform GO1D imports in order to allow treeshaking.
This plugin is based on top of babe-plugin-transform-imports
https://www.npmjs.com/package/babel-plugin-transform-imports
to transform the imports into a tree-shake-able format.
Currently supports following GO1D libs:
- @go1d/go1d
- @go1d/go1d-exchange
Why?
When Babel encounters a member style import such as:
import { View, Text } from '@go1d/go1d';
it will generate something similar to:
var go1d = require('@go1d/go1d');
var View = go1d.View;
var Text = go1d.Text;
Which causes the entire library to be loaded, even though only some components are needed. Pulling in the entire @GO1D library would cause unnecessary bloat to your client optimized (webpack etc.) bundle. The only way around this is to use default style imports:
import View from '@go1d/go1d/build/components/View';
import Text from '@go1d/go1d/build/components/Text';
But, the more pieces we need, the more this sucks. This plugin will allow you to pull in just the pieces you need, without a separate import for each item. Additionally, it will throw an error when somebody accidentally writes an import which would cause the entire module to resolve, such as:
import GO1D, { View } from '@go1d/go1d';
// -- or --
import * as GO1D from '@go1d/go1d';
Installation
npm install --save-dev @go1d/babel-plugin-transform-go1d-imports
Usage
.babelrc
:
{
"plugins": [
"@go1d/babel-plugin-transform-go1d-imports"
]
}
Maintainers
- Shangzhi Pan (shangzhi.pan@go1.com)