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