Vue公司的WebPack＆PapaParse

Question

我一直在试图利用与Vue公司的的WebPack模板（https://github.com/vuejs-templates/webpack）PapaParse的工人选项 （http://papaparse.com/#worker），但我有一个问题：

Uncaught ReferenceError: window is not #defined

所以我想，它要求文件与bundle文件分开，所以我使用了依赖关系，如https://github.com/danderson00/webpack-worker，并将其设置为从worker文件初始化一个Worker类。但是我得到了同样的错误，我不知道为什么。

这是我的工作

Vue的文件：

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并设置规则工人文件解决了我的问题。