簡単なテストプロジェクトの設定の問題 - ExceljsとBrowserify

私はブラウザアプリケーションを使ってExcelJSをテストするための簡単なテストプロジェクトを設定しようとしています。簡単なテストプロジェクトの設定の問題 - 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; 
};

？私が本当にやりたいことは、優れたテストです。私は解決策が何であるか気にしません。ライブラリが動作することを確認できる限り、私は満足しています。

出典

2017-06-20 John Riley

あなたは、あなたのapp.jsをbrowserifyしようとしているので、あなたの関数グローバルスコープで見える（変数）（ウィンドウ）

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

をしなければならない代わりに exceljs

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

のexceljs/dist/es5/exceljs.browserをbrowserify必要があります

変数を宣言することはできません。キーワードは現在の有効範囲内の変数isBoldを宣言し、関数は使用できません（varを参照）ので、同時に関数式isBoldを呼び出してください。それはあなたのコードで使用されていないので、だから、それをコメントアウト：

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

あなたはまた、exceljs/dist/es5/exceljs.browser.js自体をbrowserify、アプリでそれを使用することができます。

出典

2017-06-20 16:13:42

よろしくお願い致します。そして余分なビットのおかげで、これの上に小さなバグを扱う頭痛を救った –

簡単なテストプロジェクトの設定の問題 - ExceljsとBrowserify

答えて

関連する問題