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
          })
        }
      }
    }