vue动态加载某个目录的JS文件并解析JS文件的函数形成数组

需求

给定某个目录，把目录下的js文件筛选出来，然后动态解析并得到JS文件里面的函数。

效果

实现方法

动态加载某个目录和文件

使用webpack的require.context即可

    // 遍历src/api下js文件
    loadApiFile () {
      this.apiUrlOptions = []
      const files = require.context('@/api', true, /\.js$/).keys()
      files.forEach(file => {
        // 转换成@/api/xxx这样的结构，如@/api/code/project
        // 原值./code/project，转成code/project
        var name = file.substring(2, file.lastIndexOf('.'))
        this.apiUrlOptions.push({
          value: '@/api/' + name
        })
      })
    }

动态加载某个目录下JS文件并解析得到所有函数

	// 加载js文件并解析得到所有函数
	// jsFilePath的格式如@/api/code/project
    loadJsFunction (jsFilePath) {
      if (jsFilePath === '') {
        return
      }
      // webpack本身是一个预编译的打包工具，无法预测未知变量路径不能require纯变量路径
      // require(path),path至少要有三部分组成,目录+文件名+后缀，如果整个path是变量会报错
      // 目录 => webpack 才知道从哪里开始查找
      // 后缀 => 文件后缀，必须要加上，不然会报错
      // 文件名 => 可用变量表示
      // 把原变量路径替换成静态路径，不然会报错
      jsFilePath = jsFilePath.replace('@/api/', '')
      var jsObj = require(`@/api/${jsFilePath}`)
      this.apiNameOptions = []
      for (var p in jsObj) {
        // 获取js文件里面的函数
        if (typeof (jsObj[p]) === 'function') {
          this.apiNameOptions.push({
            value: p
          })
        }
      }
    }