Problèmes lors de la configuration d'un projet de test simple - Exceljs et Browserify

J'essaie de configurer un simple projet de test pour tester ExcelJS via une application de navigateur, et pour le reste de ma vie, je n'arrive pas à faire fonctionner correctement Browserify.Problèmes lors de la configuration d'un projet de test simple - Exceljs et Browserify

Je bundle mon code dans un fichier bundle avec le approprié nécessitent des appels et le faisceau résultant jette l'erreur suivante lorsque la page est chargée:

Uncaught TypeError: Cannot read property 'prototype' of undefined

Cette erreur semble être jeté sur un fs. Méthode ReadStream?

Voici mon 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 (base pour 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; 
};

Comment puis-je obtenir que cela fonctionne? Tout ce que je veux vraiment faire, c'est tester excelJS. Je me fiche de la solution, aussi longtemps que je peux vérifier que la bibliothèque fonctionne, je serai heureux.

Source

2017-06-20 John Riley

Vous devriez browserify exceljs/dist/es5/exceljs.browser au lieu de exceljs

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

Puisque vous allez browserify vos app.js vous devez faire vos fonctions (variables) visibles dans le contexte global (fenêtre)

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

Vous ne pouvez pas déclarer une variable avec le nom isBold et l'expression de la fonction d'appel isBold en même temps, car votre mot clé var va déclarer une variable isBold dans la portée actuelle et votre fonction ne sera pas disponible (voir var). commentaire Donc dehors, car il n'est pas utilisé dans votre code:

//var isBold = isBold(row);

En outre, il y a une faute de frappe dans getRowcolor. Résoudre le problème:

var rowColor = getRowСolor(row);

Voici les gulpfile.js pour vous:

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('.')); 
});

Vous pouvez également browserify exceljs/dist/es5/exceljs.browser.js lui-même et l'utiliser dans votre application.

Source

2017-06-20 16:13:42

Super, merci! Et merci pour tous les bits supplémentaires, m'a sauvé le mal de tête de traiter avec les plus petits insectes sur le dessus de cette –

Problèmes lors de la configuration d'un projet de test simple - Exceljs et Browserify

Répondre

Questions connexes