为了多喝两杯奶茶，我给自己的项目写了个自动化脚本

川长思鸟来 2022-09-11 03:26 182阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群![47bd3af6bb0efae81b7d151584ce223e.png][]

## ???? 前言    ##

*  事情是这样的，之前有段时间在搭自己的组件库，每次新增一个组件的时候都需要进行一些重复的操作
 *   *  创建一个组件文件夹
     *  文件夹里面新增两个文件分别是`.vue`和`index.js`分别用来编写组件代码和导出组件
     *  在`styles`文件夹里面新建一个`.scss`文件来存放该组件的样式
     *  在`styles`文件夹里引入刚刚创建的`.scss`
     *  在主`index.js`文件里引入刚刚创建的组件并注册
     *  在文档里面创建该组件的示例
 *  原本我以为每次新增一个组件花不了多少时间，直到我不小心测试了一下我每次创建新组件基础文件时用的时间...????♂️

![cf8ce052d91d3d117b342078443b004a.png][] time.jpg

*  好家伙我每次光是添加基本的初始化文件就用了快**4**分钟？？这**4**分钟我都可以下楼去奶茶店买杯喝的了...
 *  每次都是重复机械式的操作，其实仔细一想这些文件里面本质上没什么变动，就是关键信息组件名称不同罢了...????♂️
 *  众所周知，我们程序员就是为了产出让人更有 **效（更）率（懒）** 的办法，刚好前段时间重新看了会`node`，那我们就用`node`来写一个自动化脚本吧。

![4b5adc0c52e50f889d98ab2a58c23651.png][] 细节.jfif

## ???????? ToDoList ##

*  \[ \] 创建配置文件和基本目录
 *  \[ \] 创建组件目录
 *  \[ \] 创建组件文件
 *  \[ \] 引入组件样式
 *  \[ \] 引入组件

## ???????? Just Do It ##

### 创建配置文件和基本目录 ###

*  首先创建一个`auto`文件夹来存放我们所有的文件,下面是目录树。

auto
    ├─ addComponent
    │  ├─ add.js
    │  └─ data.js
    └─ page
       └─ index.js
    复制代码

*  `add.js`主要是存放我们主要的`node`操作代码。
 *  `data.js`主要是存放我们的组件名称和要生成的目录名称，例如一个`button`组件和`radio`组件是这样配置的：

/** data.js **/
    exports.data = [
      {
          folder:'button',
          componentsName:'button',
      },
      {
          folder:'radio',
          componentsName:'radio',
      }
    ];
    复制代码

*  `index.js`主要存放我们的所有模板，也就是我们希望的文件初始化的样子，具体下面会讲到。

### 创建组件目录 ###

*  因为我们的组件结构和样式是分别存放在`src`文件夹内的`packages`目录和`styles`目录中，也就是说我们接下来要生成的文件是要放在这两个目录里面（这里的路径是我自己的项目，不同项目的路径要自己调整喔~）

/** add.js **/
    const fs = require("fs");
    const path = require("path");
    // 创建目录
    function mkdirsSync(dirname) {
        //判断目录是否存在
      if (fs.existsSync(dirname)) {
          return true;
      } else {
          if (mkdirsSync(path.dirname(dirname))) {
              fs.mkdirSync(dirname);
              return console.log(`创建目录成功-${dirname}`);
          }
      }   
    }
    mkdirsSync(`./src/packages`);
    mkdirsSync(`./src/styles`);
    复制代码

*  我们使用`fs`模块的`existsSync`来检查目录是否存在，使用`mkdirSync`来创建对应路径的目录，相关的`fs`模块学习可以参考「从零开始」前端node够用指北\$二\$⚡---文件操作\[2\]
 *  接下来在终端运行一下`node ./auto/addComponent/add.js`即可生成对应文件夹。
 *  当然每次执行这么长的命令可不行，我们需要在`package.json`配置一下：

/** package.json **/
      "scripts": {
        ...
        "add":"node ./auto/addComponent/add.js"
      }
    复制代码

*  接下来每次执行`npm run add`即可。

![d831e8c5142c8d148df770dd20b5efbd.png][] image.png

### 创建组件文件 ###

*  对于我们的组件文件在我这个项目中主要有三个分别是`xx.vue` `index.js` `xx.scss`。
 *  这三个文件有什么共同店呢，就是基本模板是一样的，不同的只是组件名称罢了，比如这个`input`和`inputNumber`组件的`index.js`：

![d38aec5ddb3c7bae7ac9a0abb041502e.png][] image.png

*  那我们首先需要在`page`文件夹中的`index.js`定义三个模板来分别存放这些基本信息。

/** page/index.js **/
    exports.indexPage = function (componentsName) {
      return `
    import ${componentsName.charAt(0).toUpperCase() + componentsName.slice(1)} from './${componentsName}.vue';
    export default ${componentsName.charAt(0).toUpperCase() + componentsName.slice(1)};
      `;
      
    };
    
    exports.vuePage = function (componentsName) {
      return `
    <template>
        <div class="${componentsName}">
    
        </div>
    </template>
    <script>
    export default {
      name: '${componentsName}',
      data(){
        return{}
      }
    }
    </script>
      `;
    };
    
    exports.stylePage = function () {
      return `
    @charset "UTF-8";
    @import "common/var";
    @import "mixins/mixins";
      `;
    };
    复制代码

*  如上我们就定义了`.vue` 文件 `index.js`文件和`.scss`文件的模板，中间使用了一些首字母大写等拼接来接收我们的`componentsName`传进来的组件名称。
 *  定义了模板之后我们要使用呀，要怎么使用？很简单，继续在`add.js`文件中加入我们的`node`代码：

/** add.js **/
    ...
    const configData = require("./data");
    ...
    //遍历配置文件并调用创建目录方法
    configData.data.forEach((item) => {
      if(item.folder){
          mkdirsSync(`./src/packages/${item.folder}`);
      }
    });
    复制代码

*  在这里首先对在配置文件中的每个组件进行遍历创建相对应的文件夹来存放我们的`.vue`文件和`index.js`文件。
 *  执行`npm run add`，给我们的`data.js`提前写写好两个组件配置`button` `radio`

![09c9759d72d42a4a92a1a1ff8a2688d3.png][] image.png

*  文件夹创建成功，接下来我们要在每个文件夹添加相对应模板的`.vue`和`index.js`文件并且在`styles`文件夹中添加对应的`.scss`文件。

/** add.js **/
    ...
    //引入文件模板
    let componentsPage = require("../page/index");
    // index模板
    let indexPage = componentsPage.indexPage;
    //vue模板
    let vuePage = componentsPage.vuePage;
    //style模板
    let stylePage = componentsPage.stylePage;
    ...
    //遍历配置文件创建index、vue、style文件
    configData.data.forEach((item) => {
        if(item.componentsName){
            let indexPath=`./src/packages/${item.folder}/index.js`;
            let vuePath=`./src/packages/${item.folder}/${item.componentsName}.vue`;
            let stylePath=`./src/styles/${item.componentsName}.scss`;
            let name=item.componentsName;
            //创建index.js文件
            if (fs.existsSync(indexPath)) {
                console.log(indexPath+'已存在');
            }else{
                fs.writeFile(indexPath, indexPage(name), function(err){
                    if(err){
                        return console.log('创建index文件失败', err);
                    }
                    console.log(`创建index文件成功！-${name}.js`);
                });
            }
            //创建组件vue文件
            if (fs.existsSync(vuePath)) {
                console.log(vuePath+'已存在');
            }else{
                fs.writeFile(vuePath, vuePage(name), function(err){
                    if(err){
                        return console.log('创建vue文件失败', err);
                    }
                    console.log(`创建vue文件成功！-${name}.vue`);
                });
            }
            //创建组件style文件
            if (fs.existsSync(stylePath)) {
                console.log(stylePath+'已存在');
            }else{
                fs.writeFile(stylePath, stylePage(), function(err){
                    if(err){
                        return console.log('创建style文件失败', err);
                    }
                    console.log(`创建style文件成功！-${name}.scss`);
                });
            }
        }
    });
    复制代码

*  以上就是添加对应文件的代码啦，你不要看它很长，其实分开来很好理解，都是一样的操作，请听我细细道来：
 *   *  首先引入文件模板`../page/index.js`，分别拿出三个模板用`indexPage` `vuePage` `stylePage`来存放。
     *  再者还是遍历我们的组件配置文件
     *  在遍历过程中我们根据不同的组件提前保存一下路径的变量`indexPath` `vuePath` `stylePath`这个路径等下会使用。
     *  接下来的三个`if`判断其实都是一样的，目的是为了在对应文件夹写入对应文件，我在上面已经分好了注释，我们来看第一个创建`index.js`文件。
     *  还是通过`fs`模块的`existsSync`判断刚刚定义的路径变量是否存在，这个路径变量其实就是这个`index.js`文件，如果存在则跳过。
     *  再通过`fs`模块的`writeFile`写入相关的信息，将组件名称传进去这样`index.js`模板就创建完成了。
     *  接下来的`vue`文件和`scss`文件也是一样的，值得注意的是如果不进行判断文件是否存在的操作会直接覆盖原油的文件。
 *  怎么样？我这样一说是不是也比较好理解了呢？如果还有不清楚的可以在评论区留言喔~????
 *  我们执行一下`npm run add`试试

### 引入组件样式 ###

*  我们的组件相应的文件都做好了，因为我的项目之前是在`styles`文件夹的`index.scss`引入所有的`.scss`文件，接下来我们只需要每次执行脚本时更新覆盖这个`index.scss`文件添加新的组件样式即可。

/** add.js **/
    ...
    //一个覆盖index.scss的方法
    function dealIndexStyle(){
        let file='';
        configData.data.forEach((item) => {
            //遍历所有组件引入每个组件样式 例如：@import "button";
            let name=item.componentsName; //首字母大写
            file+=`@import "${name}";\n`;
        });
        fs.writeFile(`./src/styles/index.scss`,file,function(err){
            if(err){
                return console.log('主样式文件引入scss失败', err);
            }else{
                console.log('主样式文件引入scss成功');
            }
        });
    }
    dealIndexStyle();
    复制代码

*  我们只需要像这样每次运行都重写我们的`index.scss`文件即可，运行后得到的文件是这样的：

![124eef53261876168e27e264a885d0e6.png][] image.png

### 引入组件 ###

*  在我的项目中是通过一个`addComponents.js`文件来引入存放我们的所有组件文件再将其导出，大概的格式是这样的：

/** addComponents.js **/
    import xxx from 'xxx';
    const allComponents ={
    lxxx: xxx,
    };
    export default allComponents;
    复制代码

*  所以其实跟上一步的样式是一样的，我们只需要每次对这个文件格式做些处理然后覆盖这个文件即可。

/** add.js **/
    ...
    //遍历配置文件获取对应组件拼装组件初始化
    function addComponentsList(){
        let file='';
        let allComponents='';
        configData.data.forEach((item) => {
            //遍历所有组件每个组件添加依赖 例如：import Button from './packages/button';
            let name=item.componentsName.charAt(0).toUpperCase() + item.componentsName.slice(1); //首字母大写
            file+=`import ${name} from './packages/${item.componentsName}';\n`;
        });
        configData.data.forEach((item) => {
            //遍历所有组件每个组件添加   例如：lButton: Button,
            let name=item.componentsName.charAt(0).toUpperCase() + item.componentsName.slice(1); //首字母大写
            allComponents+=`l${name}: ${name},\n`;
        });
        file +=`const allComponents ={\n${allComponents}};\nexport default allComponents;`;
        //写入组件列表
        fs.writeFile(`./src/addComponents.js`,file,function(err){
            if(err){
                return console.log('写入组件列表失败', err);
            }else{
                console.log('写入组件列表成功');
                console.log('结束创建文件');
                console.log('>>>>>>>>>>>>>');
            }
        });
    }
    addComponentsList();
    复制代码

*  在`addComponentsList`方法里大部分都是对文件内容进行的拼接，主要的代码还是`fs`模块的`writeFile`写入功能，每个人的项目内容都不同，以上只是举例我的文件是怎么写的，具体内容还得具体分析。
 *  至此，对于一个组件的初始化的自动化脚本就完成了，我们来看看效果如何。

*  完美！！！！！好了我要去喝奶茶了。

![948fd590bfd21d69e3a004cbce74c526.png][] 奶茶.jfif

关于本文

来源：快跑啊小卢\_

https://juejin.cn/post/7002486827227545607

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[47bd3af6bb0efae81b7d151584ce223e.png]: /images/20220828/451fbd575d144687b88b6f3da77d1f2e.png
[cf8ce052d91d3d117b342078443b004a.png]: /images/20220828/5134b675cb8946e9add113cc10a649a5.png
[4b5adc0c52e50f889d98ab2a58c23651.png]: /images/20220828/50e1abf6c60e4915ba9ac5e9e776666c.png
[d831e8c5142c8d148df770dd20b5efbd.png]: /images/20220828/cc00c31f6ace48cf84932f19c8d65e28.png
[d38aec5ddb3c7bae7ac9a0abb041502e.png]: /images/20220828/19212b2e13874bd0974a146301f2e5a9.png
[09c9759d72d42a4a92a1a1ff8a2688d3.png]: /images/20220828/b5f9b96b2d7845ffa706b2d9ba065608.png
[124eef53261876168e27e264a885d0e6.png]: /images/20220828/92cca515d68145d39b0ccce4cd53eb9c.png
[948fd590bfd21d69e3a004cbce74c526.png]: /images/20220828/df15e7713cc146c3a569b9a89f9b5f85.png