编写一个简单的babel插件

babel插件编写

编写一个模块按需加载的babel插件

当我们导入lodash中指定的工具函数时 会将整个lodash打包进来

import {flattenDeep, chunk} from 'lodash'

复制代码

换成按需引入的写法 但是这样写有些麻烦 我们想由上面写法 自动分解为下面写法 所以我们就编写一个babel插件

import flattenDeep from 'lodash/flattenDeep'
import chunk from 'lodash/chunk'
复制代码

Install package

npm i babel-core -D
npm i babel-types -D
复制代码

插件编写

在当前工程的node_modules下创建一个babel-plugin-extract目录 里面创建index.js


const babel = require('babel-core');
const types = require('babel-types');

// 将import {flattenDeep, chunk} from 'lodash' 转化为下面这种写法:
// import flattenDeep from 'lodash/flattenDepp'
// import chunk from 'lodash/chunk'

// Babel将源码转换AST之后,通过遍历AST树(其实就是一个js对象),对树做一些修改,然后再将AST转成code,即成源码。
let visitor = {
    // import 语句解析时触发该函数
    ImportDeclaration(path, ref = {opts: {}}) {  //path 语句抽象语法树 opts 插件参数
        let node = path.node;
        let {specifiers} = node; // 导入的包的说明符 是个数组集合
        // 确认导入库 是否是 .babelrc library属性指定库 以及 如果不是默认导入 才进行按需导入加载
        if (ref.opts.library === node.source.value && !types.isImportDefaultSpecifier(specifiers[0])) {
            let newImports = specifiers.map(specifier => ( // 遍历 出导入的每个包的说明描述符
                types.importDeclaration([types.importDefaultSpecifier(specifier.local)],
                // 生成import语句如 import chunk from 'lodash/chunk'
                types.stringLiteral(`${node.source.value}/${specifier.local.name}`))
            ));

            // 将原有语句写法替换掉 新写法
           path.replaceWithMultiple(newImports);
        }
    }
}

module.exports = function(babel) { // 将插件导出
    return {visitor} // 属性名固定为visitor(访问者)
};

复制代码

配置.babelrc

{
    "presets": [
        "env",
        "stage-0"
    ],
    "plugins": [
        [
            "extract", // 配置插件
            {
                "library": "lodash" // 指定处理的库
            }
        ]
    ]
}

复制代码

build

npm run build // 此时编译后的bundle.js变小了
复制代码

源码地址

先npm install 然后将源码目录中babel-plugin-extract目录 挪到 node_modules下,npm run build babel-plugin-extract

参考

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值