Probleme beim Einrichten eines einfachen Testprojekts - Exceljs und Browserify

Ich versuche, ein einfaches Testprojekt einzurichten, um ExcelJS über eine Browseranwendung zu testen, und für das Leben von mir kann ich nicht erreichen, dass Browserify ordnungsgemäß funktioniert.Probleme beim Einrichten eines einfachen Testprojekts - Exceljs und Browserify

ich bündeln meinen Code in eine Bundle-Datei mit den entsprechenden Anrufe erfordern und das resultierende Bündel führt den folgenden Fehler, wenn die Seite geladen wird:

Uncaught TypeError: Cannot read property 'prototype' of undefined

Dieser Fehler auf einem fs geworfen zu sein scheint. ReadStream-Methode?

Hier ist mein Code:

index.html

<!DOCTYPE html> 
<head> 
    <title>Test Excel JS</title> 
    <meta charset="utf-8"> 
    <meta name="description" content=""> 

    <link rel="stylesheet" href="app.css"> 
</head> 
<body> 
    <div> 
    <label>Test</label> 
    <button onclick="test()">Test this Stuff and Check your console log</button> 
    </div> 

    <script src="bundle.js"></script> 
    <script> 
     var test = function(){ 
      var workbook = generateTestFile(); 
      console.log(workbook); 
     }; 
    </script> 
</body> 
</html>

app.js (Basis für bundle.js)

'use strict'; 

var Excel = require('exceljs'); 

var isBold = function(dataRow){ 
    return dataRow.name === "Jeff"; 
}; 

var getRowColor = function(dataRow){ 
    return dataRow.color; 
}; 

var getCellColor = function(dataRow, cell){ 
    return (dataRow.name === 'John' && cell.value === 0)? 'orange' : dataRow.color; 
}; 

var getFont = function(isBold, color){ 
    return { 
     name: 'Arial Black', 
     color: color, 
     family: 2, 
     size: 14, 
     bold: isBold 
    }; 
}; 

var getTestHeader = function(){ 
    return [ 
     {key: "id", header: "Id"}, 
     {key: "name", header: "Name", width: 32}, 
     {key: "color", header: "Color", width: 10} 
    ]; 
}; 

var getTestData = function(){ 
    return [ 
     { 
      id: 0, 
      name: "John", 
      color: "green" 
     }, 
     { 
      id: 1, 
      name: "Rehan", 
      color: "blue" 
     }, 
     { 
      id: 2, 
      name: "Jeff", 
      color: "yellow" 
     } 
    ]; 
}; 

var generateTestFile = function(){ 
    var workbook = new Excel.Workbook(); 
    var worksheet = workbook.addWorksheet('Sheet 1'); 

    //Set Column Headers 
    worksheet.columns = getTestHeader(); 

    //Add Rows 
    var testData = getTestData(); 
    var length = testData.length; 
    for(var i = 0; i < length; i++){ 
     worksheet.addRow(testData[i]); 
    } 

    //Format Rows 
    worksheet.eachRow(function(row, rowNumber){ 
     console.log(row); 
     var isBold = isBold(row); 
     var rowColor = getRowcolor(row); 
     row.eachCell(function(cell, colNumber){ 
      var cellColor = getCellColor(row, cell); 
      console.log(cell); 
     }); 
    }); 

    return workbook; 
};

Wie bekomme ich diese Arbeit? Alles, was ich wirklich tun möchte, ist das Testen von Excel. Es ist mir egal, was die Lösung ist, solange ich bestätigen kann, dass die Bibliothek funktioniert, werde ich glücklich sein.

Quelle

2017-06-20 John Riley

Sie exceljs/dist/es5/exceljs.browser statt exceljs

var Excel = require('exceljs/dist/es5/exceljs.browser');

Da Sie gehen zu Ihrer app.js browserify sollten Sie Ihre Funktionen machen (Variablen) sichtbar im globalen Bereich (Fenster)

global.generateTestFile = function generateTestFile(){ 
    // ... 
};

browserify sollte

Sie können keine Variable mit dem Namendeklarierenund rufen Sie gleichzeitig den Funktionsausdruck isBold auf, da Ihr Schlüsselwort var eine Variable isBold im aktuellen Gültigkeitsbereich deklariert und Ihre Funktion nicht verfügbar ist (siehe var). So kommentieren Sie sie aus, da es nicht in Ihrem Code verwendet wird:

//var isBold = isBold(row);

Außerdem gibt es ein Tippfehler in getRowcolor. Fix it:

var rowColor = getRowСolor(row);

Hier ist die gulpfile.js für Sie:

var gulp = require('gulp'); 
var source = require('vinyl-source-stream'); 
var browserify = require('browserify'); 
//var uglify = require('gulp-uglify'); 
//var buffer = require('vinyl-buffer'); 

gulp.task('default', function() { 
    return browserify('app.js') 
    .bundle() 
    .pipe(source('bundle.js')) 
    //.pipe(buffer()) 
    //.pipe(uglify()) 
    .pipe(gulp.dest('.')); 
});

Sie auch exceljs/dist/es5/exceljs.browser.js selbst browserify können und verwenden Sie es in Ihrer Anwendung.

Quelle

2017-06-20 16:13:42

Großartig, danke! Und danke für all die zusätzlichen Bits, rettete mir auch den Kopfschmerz im Umgang mit den kleineren Bugs zusätzlich –

Probleme beim Einrichten eines einfachen Testprojekts - Exceljs und Browserify

Antwort

Verwandte Themen