設置簡單測試項目的問題 - 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。我不在乎解決方案是什麼，只要我可以驗證圖書館的工作，我會很高興。

來源

2017-06-20 John Riley

既然你要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本身和你的應用程序中使用它。

來源

2017-06-20 16:13:42

太好了，謝謝！並且感謝所有額外的位，爲我解決了處理小問題的難題 –

設置簡單測試項目的問題 - Exceljs和Browserify

回答

相關問題