設置簡單測試項目時出現問題-Exceljs和Browserify

Question

我正在嘗試建立一個簡單的測試項目，以通過瀏覽器應用程序測試ExcelJS，而對於我而言，我無法使Browserify正常工作。

我使用適當的require調用將我的代碼捆綁到一個捆綁文件中，並且在加載頁面時，產生的捆綁拋出以下錯誤：

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。 我不在乎解決方案是什么，只要我可以驗證庫是否有效，我都會很高興。

Answer 1

您應該使用exceljs/dist/es5/exceljs.browser而不是exceljs

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

由於您要對app.js進行瀏覽器化，因此應使函數（變量）在全局范圍（窗口）中可見

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

您不能同時聲明名稱為isBold的變量和調用函數表達式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('.'));
});

您還可以將exceljs/dist/es5/exceljs.browser.js本身瀏覽器化，並在您的應用程序中使用它。

設置簡單測試項目時出現問題-Exceljs和Browserify

問題描述

1 個解決方案

解決方案1
2 已采納 2017-06-20 16:13:42

設置簡單測試項目時出現問題-Exceljs和Browserify

問題描述

1 個解決方案

解決方案1 2 已采納 2017-06-20 16:13:42

解決方案1
2 已采納 2017-06-20 16:13:42