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...