ES6 import代码智能转换Babel插件: babel-plugin-imports-transform

babel-plugin-imports-transform

ES6 import代码智能转换Babel插件，优化(webpack等)打包构建体积。

Github地址: https://github.com/abell12345...

分为两种情形使用：index.js文件做为Babel插件来使用，而index-transform.js能够在js代码中单独调用函数来使用。

会将下面的import代码:

import { Row, Grid as MyGrid } from 'react-bootstrap';
    import { merge } from 'lodash';

转化为引入单个对应文件:

import Row from 'react-bootstrap/lib/Row';
    import MyGrid from 'react-bootstrap/lib/Grid';
    import merge from 'lodash/merge';

为何要这么作？

当Babel遇到下面的模块引入代码的时候:

import { Grid, Row, Col } from 'react-bootstrap';

它会简单的把上面的代码编译为下面的代码:

var reactBootstrap = require('react-bootstrap');
    var Grid = reactBootstrap.Grid;
    var Row = reactBootstrap.Row;
    var Col = reactBootstrap.Col;

一些库, 好比 react-bootstrap 和 lodash, 其体积是至关大的，若是只是使用其中的部分API的话，上面的代码也会把整个库打包进去，从而致使打出的包的体积会特别大。惟一的处理方式是只引入对应的子模块:

import Grid from 'react-bootstrap/lib/Grid';
    import Row from 'react-bootstrap/lib/Row';
    import Col from 'react-bootstrap/lib/Col';

可是，咱们引用的部分越多，上面的代码写的就会越多。 而这个插件可让你用简单的语法来引入对应的模块，只打包对应的文件，而不是将整个库打包进去。
另外，这个插件能够配置：若是某个同窗书写了会打包进整个库的代码的话就会抛出异常，好比:

import Bootstrap, { Grid } from 'react-bootstrap';
    // -- or --
    import * as Bootstrap from 'react-bootstrap';

安装

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

使用

In .babelrc:

{
        "plugins": [
            ["babel-plugin-imports-transform", {
                "next": {
                    "transform": "next/lib/${member-lowercase}",
                    "preventFullImport": true,
                    "style": "next/lib/${member-lowercase}/index.scss",
                },
                "lodash": {
                    "transform": "lodash/${member}",
                    "preventFullImport": true
                }
            }]
        ]
    }

style支持

如上面的示例，咱们支持若是配置了style属性咱们会自动帮引入style文件，并且会作只能匹配，只有该样式文件存在的情形下才会作对应的引入，不然不引入。

高级转换

默认提供的字符串替换的转换形式并不能知足全部的需求，好比，须要对import的名字进行正则匹配的情形下，你能够提供行一个js文件路径，该文件exports出一个执行函数来替代字符串的转换。记住，.js文件的路径须要是根据这个插件的相对路径，通常这个插件的路径都是：/node_modules/babel-plugin-imports-transform。你能够提供任意的文件名字，只要以.js结尾。

示例以下：

.babelrc:

{
        "plugins": [
            ["babel-plugin-imports-transform", {
                "my-library": {
                    "transform": "../../path/to/transform.js",
                    "preventFullImport": true
                }
            }]
        ]
    }

/path/to/transform.js:

module.exports = function(importName) {
    return 'my-library/etc/' + importName.toUpperCase();
};

这有点hack,可是是由于.babelrc配置文件是一个纯JSON，值只能配置字符串而不能配置函数。 在Babel 7.0, 貌似.babelrc.js配置文件会被提供, 到时候这个插件会被升级来支持配置函数。

相关问题参考: https://github.com/babel/babe...