设置简单测试项目的问题 - Exceljs和Browserify

问题描述：

我想设置一个简单的测试项目来通过浏览器应用程序来测试ExcelJS，并且对于我来说，我无法让Browserify正常工作。设置简单测试项目的问题 - Exceljs和Browserify

我捆绑我的代码与相应需要调用一个包文件，并将所得捆引发以下错误时的页面加载：出现

Uncaught TypeError: Cannot read property 'prototype' of undefined

这个错误要在一个FS抛出。 ReadStream方法？

这里是我的代码：

的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（基地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; 
};

我如何得到这个工作？我真正想做的就是测试excelJS。我不在乎解决方案是什么，只要我可以验证图书馆的工作，我会很高兴。

答

既然你要browserify您app.js你应该让你的函数（变量）在全球范围内（窗口）

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

可见你应该browserify的 exceljs/dist/es5/exceljs.browser代替 exceljs

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

您不能声明名称为的变量和呼叫功能表达式isBold，因为您的var关键字将在当前范围中声明变量isBold，并且您的功能将不可用（请参阅var）。所以注释掉，因为它不是在你的代码中使用：

//var isBold = isBold(row);

此外，还有在getRowcolor一个错字。修复：

var rowColor = getRowСolor(row);

这里是你的gulpfile.js：

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

您也可以browserify exceljs/dist/es5/exceljs.browser.js本身和你的应用程序中使用它。

太好了，谢谢！并且感谢所有额外的位，为我解决了处理小问题的难题 –

设置简单测试项目的问题 - Exceljs和Browserify

相关推荐