babel-plugin-imports-transform

ES6 import代碼智能轉(zhuǎn)換Babel插件，優(yōu)化(webpack等)打包構(gòu)建體積。

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

分為兩種情形使用：index.js文件作為Babel插件來(lái)使用，而index-transform.js可以在js代碼中單獨(dú)調(diào)用函數(shù)來(lái)使用。

會(huì)將下面的import代碼:

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

轉(zhuǎn)化為引入單個(gè)對(duì)應(yīng)文件:

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

為什么要這么做？

當(dāng)Babel遇到下面的模塊引入代碼的時(shí)候:

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

它會(huì)簡(jiǎn)單的把上面的代碼編譯為下面的代碼:

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

一些庫(kù), 比如 react-bootstrap 和 lodash, 其體積是相當(dāng)大的，如果只是使用其中的部分API的話，上面的代碼也會(huì)把整個(gè)庫(kù)打包進(jìn)去，從而導(dǎo)致打出的包的體積會(huì)特別大。唯一的處理方式是只引入對(duì)應(yīng)的子模塊:

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

但是，我們引用的部分越多，上面的代碼寫的就會(huì)越多。 而這個(gè)插件可以讓你用簡(jiǎn)單的語(yǔ)法來(lái)引入對(duì)應(yīng)的模塊，只打包對(duì)應(yīng)的文件，而不是將整個(gè)庫(kù)打包進(jìn)去。
另外，這個(gè)插件可以配置：如果某個(gè)同學(xué)書(shū)寫了會(huì)打包進(jìn)整個(gè)庫(kù)的代碼的話就會(huì)拋出異常，比如:

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屬性我們會(huì)自動(dòng)幫引入style文件，而且會(huì)做只能匹配，只有該樣式文件存在的情形下才會(huì)做對(duì)應(yīng)的引入，否則不引入。

高級(jí)轉(zhuǎn)換

默認(rèn)提供的字符串替換的轉(zhuǎn)換形式并不能滿足所有的需求，比如，需要對(duì)import的名字進(jìn)行正則匹配的情形下，你可以提供行一個(gè)js文件路徑，該文件exports出一個(gè)執(zhí)行函數(shù)來(lái)替代字符串的轉(zhuǎn)換。記住，.js文件的路徑需要是根據(jù)這個(gè)插件的相對(duì)路徑，一般這個(gè)插件的路徑都是：/node_modules/babel-plugin-imports-transform。你可以提供任意的文件名字，只要以.js結(jié)尾。

示例如下：

.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(); };

這有點(diǎn)hack,但是是因?yàn)?babelrc配置文件是一個(gè)純JSON，值只能配置字符串而不能配置函數(shù)。 在Babel 7.0, 貌似.babelrc.js配置文件會(huì)被提供, 到時(shí)候這個(gè)插件會(huì)被升級(jí)來(lái)支持配置函數(shù)。

相關(guān)問(wèn)題參考: https://github.com/babel/babe...

總結(jié)

以上是生活随笔為你收集整理的ES6 import代码智能转换Babel插件: babel-plugin-imports-transform的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。