뷰 웹팩 및 PapaParse

Question

내가 뷰의 웹팩 템플릿 (https://github.com/vuejs-templates/webpack을)와 PapaParse의 노동자 옵션 (http://papaparse.com/#worker)를 활용하는 시도를하고 있어요하지만 문제가 있어요 파일을 번들 파일과 별도로 작성해야하므로 https://github.com/danderson00/webpack-worker과 같은 종속성을 사용하고 작업자 파일에서 Worker 클래스를 초기화하도록 설정했습니다. 그러나 나는 똑같은 오류를 낳았고 그 이유는 모르겠습니다.

import axios from 'axios' 
import client from 'webpack-worker/client' 
import squel from 'squel' 
import FileSaver from 'filesaver.js' 
export default { 
    name: 'Country', 
    data() { 
    return { 
     downloading: true, 
     dl_progress: 0, 
     parsing: false, 
     processing: false, 
     data: null, 
     ipv4: [], 
     meta: [], 
     dict: {}, 
     selected_country: [] 
    } 
    }, 
    mounted() { 
    // Unfortunately, MaxMind site has no cross-origin header, so we are unable to download directly 
    axios.get(require('../../assets/archive/GeoLite2-Country-CSV.zip'), { 
     responseType: 'blob', // JSZIP only takes in binary data, so we set the response as blob (binary) 
     onDownloadProgress: (progressEvent) => { 
     this.dl_progress = Math.round((event.loaded * 100)/event.total) 
     } 
    }) 
     .then((response) => { 
     this.progress = 100 
     this.downloading = false 
     this.parsing = true 
     this.data = response.data 
     this.parse() 
     }) 
    }, 
    methods: { 
    parse() { 
     client(new Worker('country.js'), { 
     data: this.data 
     }) 
     .subscribe(progress => { 
      console.log(progress) 
     }) 
     .then(result => { 
      console.log('got result') 
     }) 
    }, 
    process() { 
     let out = [] 
     this.ipv4.forEach((block) => { 
     if (this.selected_country.includes(block.registered_country_geoname_id)) { 
      out.push({cidr: block.network, comment: this.dict[block.registered_country_geoname_id]}) 
     } 
     }) 
     let SQL = squel 
        .insert() 
        .into('cidr_list') 
        .setFieldsRows(out) 
        .toString() 
     let blob = new Blob([SQL], {type: 'application/sql;charset=utf-8'}) 
     FileSaver.saveAs(blob, 'country.sql') 
     this.$toast.open({ 
     message: 'Successfully downloaded country import file', 
     type: 'is-success' 
     }) 
    } 
    } 
} 

근무 파일 :

import process from 'webpack-worker/process' 
import Papa from 'papaparse' 
import JSZip from 'jszip' 
import _ from 'lodash' 

process((params, emit) => { 
    emit(0) 
    let zip = new JSZip() 
    zip.loadAsync(params.data) 
    .then((zipContent) => { 
     zip.file('GeoLite2-Country-CSV_20171003/GeoLite2-Country-Blocks-IPv4.csv') 
     .async('string') 
     .then(data => { 
      emit(25) 
      Papa.parse(data, { 
      header: true, 
      complete: ipv4 => { 
       emit(50) 
       zip.file('GeoLite2-Country-CSV_20171003/GeoLite2-Country-Locations-en.csv') 
       .async('string') 
       .then(data => { 
        emit(75) 
        Papa.parse(data, { 
        header: true, 
        complete: meta => { 
         emit(100) 
         let dict = {} 
         meta.data.forEach(geo => { 
         dict[geo.geoname_id] = geo.country_name 
         }) 
         return { 
         ipv4: ipv4.data, 
         meta: _.sortBy(meta.data, 'country_name'), 
         dict: dict 
         } 
        } 
        }) 
       }) 
      } 
      }) 
     }) 
    }) 
}) 

Answer 1

worker-loader를 사용하고 근로자 파일 내 문제를 해결하기위한 규칙을 설정

여기에 내 작품

뷰 파일입니다.