vue项目中编写一个脚本文件实现自动生成组件注册代码，自动注册组件

每写一个openlayers官网示例都要在我的项目中注册一个组件并引入，操作重复且繁琐，于是找了个偷懒的方法。如果有跟我起一样架子的小伙伴可以c一下~

每次增加一个组件List.vue中就需要进行这么几步操作

1、import 组件名 from xxx

2、components里面注册组件名

3、修改mapviewCom的值为最新组件名

4、list数组中添加一个对象text和name都为组件名

<script>
import FirstMap from "./components/FirstMap.vue";
import VectorTiles from "./components/VectorTiles.vue";
// components-import-placeholder
export default {
  name: "",
  components: {
    FirstMap,
    VectorTiles,
     // components-object-placeholder
    
  },
  data() {
    return {
      mapviewCom: "VectorTiles",
      list: [
        {
          name: "FirstMap",
          text: "加载第一个地图",
        },
        {
          name: "VectorTiles",
          text: "加载第二个地图",
        },
        // list-placeholder
      ],
    };
  },
  computed: {},
  created() {},
  methods: {
    setMapView(item) {
      this.mapviewCom = item.name;
    },
  },
};
</script>

于是，写一个generateListVue.js文件，写入以下代码：

const fs = require('fs');
const path = require('path');

// 指定目录
const componentsDir = path.resolve(__dirname, 'src/views/list/components');

// 遍历目录中的所有 .vue 文件
const components = fs.readdirSync(componentsDir).filter(file => file.endsWith('.vue'));

// 读取 List.vue 文件
const listVuePath = path.resolve(__dirname, 'src/views/list/List.vue');
let listVueContent = fs.readFileSync(listVuePath, 'utf-8');
// 查找现有的 import 语句和组件定义
const existingImports = new Set();
const importRegex = /import\s+(\w+)\s+from\s+".\/components\/\1.vue";/g;
let match;
while ((match = importRegex.exec(listVueContent)) !== null) {
  existingImports.add(match[1]);
}

// 生成需要的代码
let imports = '';
let componentsObject = '';
let mapviewCom  = '';
let list = '';
components.forEach(file => {
  const componentName = path.basename(file, '.vue');
  if (!existingImports.has(componentName)) {
    imports += `import ${componentName} from "./components/${componentName}.vue";\n`;
    mapviewCom = componentName
    componentsObject += `  ${componentName},\n`;
    list += `   {
        name: "${componentName}",
        text: "${componentName.replace(/([A-Z])/g, ' $1').trim()}"
      },\n`;
  }
});

// 插入生成的代码
listVueContent = listVueContent.replace(
  '// components-import-placeholder',
  imports + '// components-import-placeholder'
);

listVueContent = listVueContent.replace(
  '// components-object-placeholder',
  componentsObject + '  // components-object-placeholder'
);

const mapviewComRegex = /(mapviewCom:\s*")([^"]*)(")/;
listVueContent = listVueContent.replace(
  mapviewComRegex,
  `mapviewCom: "${mapviewCom}"`
);

listVueContent = listVueContent.replace(
  '// list-placeholder',
  list + '    // list-placeholder'
);

// 写入更新后的内容回 List.vue 文件
fs.writeFileSync(listVuePath, listVueContent, 'utf-8');

console.log('List.vue 文件已更新');

代码的重要意思就是利用nodeJS的fs和path模块将views/list/components下的.vue文件遍历自动生成import... components..list...语句，再写入List.vue文件中。

因为我最终需要的list文件中name和text属性并非完全一样，text属性中会加一些中文注释，所以我并不想每次执行脚本时所有组件都重新注册，只希望增加的组件自动注册。所以每次生成前会先检查一下之前的import语句，原本已经注册的文件将不会再注册，只会注册新增的组件。在list文件中需要增加// components-import-placeholder，// components-object-placeholder，// list-placeholder三个标志的占位符，这样每次只会在这三处占位符下面插入新的代码。

然后，来执行脚本

控制台中输入以下代码即可执行

node generateListVue.js

或者是，在package.json中增加一个脚本指令generate

"scripts": {
    "dev": "vue-cli-service serve --port 7000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "generate": "node generateListVue.js"
  },

这样在控制台 npm run generate 就可以执行脚本了。