Проблемы с настройкой простого тестового проекта — Exceljs и Browserify

Я пытаюсь настроить простой тестовый проект для тестирования 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. Мне все равно, какое решение, пока я могу убедиться, что библиотека работает, я буду счастлив.


javascript html browserify require exceljs
person John Riley    schedule 20.06.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы должны браузерировать 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 и использовать его в своем приложении.

person Do Async    schedule 20.06.2017
comment
Большое спасибо! И спасибо за все дополнительные биты, избавили меня от головной боли, связанной с устранением мелких ошибок вдобавок к этому. - person John Riley; 20.06.2017