首页 值得一看 🔍️

文件太多忘记写export怎么办?

我们在写一个组件库或者npm包的时候,会遇到这种情况:需要导出多个组件或多个文件
里的方法,然后会有一个入口文件index.js,里面写满了export * from ‘./xx.js’这样的语句。

可以看一下element-plus里面的代码,
element-plus导出N个组件

export * from './select'
export * from './select-v2'
export * from './skeleton'
export * from './slider'
export * from './space'
export * from './steps'
export * from './switch'
export * from './table'
export * from './table-v2'
export * from './tabs'
export * from './tag'
export * from './time-picker'
export * from './time-select'
export * from './timeline'
export * from './tooltip'
export * from './transfer'
export * from './tree'

其实这样的代码很整洁了,但是有的时候会出现这样的情况:
新增了一个组件或者文件,但是忘记在入口文件里写导出语句。

而且本身这些代码如此规整,看起来可以自动生成啊!

自动生成export语句 小工具

为了应对忘记写export语句的情况发生,我们可以写一个小工具,来自动生成
这个入口文件。

import fg from 'fast-glob';
import fs from 'fs';

const exec = async () => {
    const entries = await fg(['src/*.js']);

    // 如果入口文件已经存在,则删除它,
    const arr = await fg(['./main.js']);
    if (arr.length) {
        fs.unlinkSync('./main.js');
    }
    // 入口文件里的代码用文件追加方式一句句生成
    for (let key in entries) {
        fs.writeFile('./main.js', `export * from './${entries[key]}';\n`, {'flag':'a'}, function (err) {
            if (err) throw err;
        });
    }
};

exec();

请注意,这只是示例代码,对我的项目生效,如果你要用,请修改里面的路径部分!



文章评论

未显示?请点击刷新