Handsontable не загружается при использовании веб-пакета - PullRequest
Новая
       12

Handsontable не загружается при использовании веб-пакета

0 голосов
/ 22 апреля 2019

Я недавно переключился на веб-пакет с ручной загрузки моих библиотек JS.

Как и другие (см .: # 4053 и # 3718 ) Я должен был вмешаться в webpack.config.js, теперь это выглядит так: 

const path = require('path');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
    entry: './src/flaemi.js',
    output: {
        path: path.join(__dirname, 'static'),
        filename: 'flaemi.js'
        },
    module : {
        noParse: [path.join(__dirname, 'node_modules/handsontable/dist/handsontable.full.js')],
        rules: [
        {
            test: /\.css$/,
            use: [ { loader: 'style-loader' },
                   { loader: 'css-loader' } ]
        },
        {

            test: /\.(png|jpg|svg)$/,
            use: [ { loader  : 'url-loader?limit=30000&name=images/[name].[ext]' } ]
        },
        ]
    },
    plugins : [
        new webpack.ProvidePlugin({
           "$": "jquery",
           "jQuery": "jquery",
           "window.jQuery":"jquery"
        }),
    ],
    resolve : {
        alias: {
          // bind version of jquery-ui
          "jquery-ui": "jquery-ui/jquery-ui.js",
          // bind to modules;
          modules: path.join(__dirname, "node_modules"),
          'handsontable': path.join(__dirname, 'node_modules/handsontable/dist/handsontable.full.js'),
          'handsontable.css': path.resolve(__dirname, 'node_modules/handsontable/dist/handsontable.full.css')}
    }

};

Я не уверен, нужно ли мне включать зависимости для Handsontable или нет в package.json, но я все равно сделал: 

{
  "name": "flaemi",
  "version": "0.2.4",
  "description": "Flaemi is a geographical data visualizer.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "D3",
    "jQuery",
    "Bootstrap",
    "data",
    "visualization"
  ],
  "author": "Hrafn Malmquist",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "bootstrap-select": "^1.13.8",
    "bootstrap4-toggle": "^3.4.0",
    "d3": "^5.9.2",
    "handsontable": "^7.0.2",
    "hot-formula-parser": "^3.0.0",
    "jquery": "^3.3.1",
    "jquery-ui": "^1.12.1",
    "moment": "^2.20.1",
    "numbro": "^2.1.2",
    "pikaday": "^1.5.1",
    "popper.js": "^1.14.7",
    "topojson": "^3.0.2"
  }
}

Когда я запускаю webpack для объединения js и включаю стандартную демо-версию "Заголовки" (JS-скрипта доступна в ссылке), таблица не загружается должным образом и ошибки нет.

JS-код взят из этой скрипки: 

var dataObject = [
  {
    id: 1,
    flag: 'EUR',
    currencyCode: 'EUR',
    currency: 'Euro',
    level: 0.9033,
    units: 'EUR / USD',
    asOf: '08/19/2019',
    onedChng: 0.0026
  },
  {
    id: 2,
    flag: 'JPY',
    currencyCode: 'JPY',
    currency: 'Japanese Yen',
    level: 124.3870,
    units: 'JPY / USD',
    asOf: '08/19/2019',
    onedChng: 0.0001
  },
  {
    id: 3,
    flag: 'GBP',
    currencyCode: 'GBP',
    currency: 'Pound Sterling',
    level: 0.6396,
    units: 'GBP / USD',
    asOf: '08/19/2019',
    onedChng: 0.00
  },
  {
    id: 4,
    flag: 'CHF',
    currencyCode: 'CHF',
    currency: 'Swiss Franc',
    level: 0.9775,
    units: 'CHF / USD',
    asOf: '08/19/2019',
    onedChng: 0.0008
  },
  {
    id: 5,
    flag: 'CAD',
    currencyCode: 'CAD',
    currency: 'Canadian Dollar',
    level: 1.3097,
    units: 'CAD / USD',
    asOf: '08/19/2019',
    onedChng: -0.0005
  },
  {
    id: 6,
    flag: 'AUD',
    currencyCode: 'AUD',
    currency: 'Australian Dollar',
    level: 1.3589,
    units: 'AUD / USD',
    asOf: '08/19/2019',
    onedChng: 0.0020
  },
  {
    id: 7,
    flag: 'NZD',
    currencyCode: 'NZD',
    currency: 'New Zealand Dollar',
    level: 1.5218,
    units: 'NZD / USD',
    asOf: '08/19/2019',
    onedChng: -0.0036
  },
  {
    id: 8,
    flag: 'SEK',
    currencyCode: 'SEK',
    currency: 'Swedish Krona',
    level: 8.5280,
    units: 'SEK / USD',
    asOf: '08/19/2019',
    onedChng: 0.0016
  },
  {
    id: 9,
    flag: 'NOK',
    currencyCode: 'NOK',
    currency: 'Norwegian Krone',
    level: 8.2433,
    units: 'NOK / USD',
    asOf: '08/19/2019',
    onedChng: 0.0008
  },
  {
    id: 10,
    flag: 'BRL',
    currencyCode: 'BRL',
    currency: 'Brazilian Real',
    level: 3.4806,
    units: 'BRL / USD',
    asOf: '08/19/2019',
    onedChng: -0.0009
  },
  {
    id: 11,
    flag: 'CNY',
    currencyCode: 'CNY',
    currency: 'Chinese Yuan',
    level: 6.3961,
    units: 'CNY / USD',
    asOf: '08/19/2019',
    onedChng: 0.0004
  },
  {
    id: 12,
    flag: 'RUB',
    currencyCode: 'RUB',
    currency: 'Russian Rouble',
    level: 65.5980,
    units: 'RUB / USD',
    asOf: '08/19/2019',
    onedChng: 0.0059
  },
  {
    id: 13,
    flag: 'INR',
    currencyCode: 'INR',
    currency: 'Indian Rupee',
    level: 65.3724,
    units: 'INR / USD',
    asOf: '08/19/2019',
    onedChng: 0.0026
  },
  {
    id: 14,
    flag: 'TRY',
    currencyCode: 'TRY',
    currency: 'New Turkish Lira',
    level: 2.8689,
    units: 'TRY / USD',
    asOf: '08/19/2019',
    onedChng: 0.0092
  },
  {
    id: 15,
    flag: 'THB',
    currencyCode: 'THB',
    currency: 'Thai Baht',
    level: 35.5029,
    units: 'THB / USD',
    asOf: '08/19/2019',
    onedChng: 0.0044
  },
  {
    id: 16,
    flag: 'IDR',
    currencyCode: 'IDR',
    currency: 'Indonesian Rupiah',
    level: 13.83,
    units: 'IDR / USD',
    asOf: '08/19/2019',
    onedChng: -0.0009
  },
  {
    id: 17,
    flag: 'MYR',
    currencyCode: 'MYR',
    currency: 'Malaysian Ringgit',
    level: 4.0949,
    units: 'MYR / USD',
    asOf: '08/19/2019',
    onedChng: 0.0010
  },
  {
    id: 18,
    flag: 'MXN',
    currencyCode: 'MXN',
    currency: 'Mexican New Peso',
    level: 16.4309,
    units: 'MXN / USD',
    asOf: '08/19/2019',
    onedChng: 0.0017
  },
  {
    id: 19,
    flag: 'ARS',
    currencyCode: 'ARS',
    currency: 'Argentinian Peso',
    level: 9.2534,
    units: 'ARS / USD',
    asOf: '08/19/2019',
    onedChng: 0.0011
  },
  {
    id: 20,
    flag: 'DKK',
    currencyCode: 'DKK',
    currency: 'Danish Krone',
    level: 6.7417,
    units: 'DKK / USD',
    asOf: '08/19/2019',
    onedChng: 0.0025
  },
  {
    id: 21,
    flag: 'ILS',
    currencyCode: 'ILS',
    currency: 'Israeli New Sheqel',
    level: 3.8262,
    units: 'ILS / USD',
    asOf: '08/19/2019',
    onedChng: 0.0084
  },
  {
    id: 22,
    flag: 'PHP',
    currencyCode: 'PHP',
    currency: 'Philippine Peso',
    level: 46.3108,
    units: 'PHP / USD',
    asOf: '08/19/2019',
    onedChng: 0.0012
  }
];
var currencyCodes = ['EUR', 'JPY', 'GBP', 'CHF', 'CAD', 'AUD', 'NZD', 'SEK', 'NOK', 'BRL', 'CNY', 'RUB', 'INR', 'TRY', 'THB', 'IDR', 'MYR', 'MXN', 'ARS', 'DKK', 'ILS', 'PHP'];
var flagRenderer = function (instance, td, row, col, prop, value, cellProperties) {
  var currencyCode = value;
  while (td.firstChild) {
    td.removeChild(td.firstChild);
  }
  if (currencyCodes.indexOf(currencyCode) > -1) {
    var flagElement = document.createElement('DIV');
    flagElement.className = 'flag ' + currencyCode.toLowerCase();
    td.appendChild(flagElement);
  } else {
    var textNode = document.createTextNode(value === null ? '' : value);

    td.appendChild(textNode);
  }
};
var hotElement = document.querySelector('#hot');
var hotElementContainer = hotElement.parentNode;
var hotSettings = {
  data: dataObject,
  columns: [
    {
      data: 'id',
      type: 'numeric',
      width: 40
    },
    {
      data: 'flag',
            renderer: flagRenderer
    },
    {
      data: 'currencyCode',
      type: 'text'
    },
    {
      data: 'currency',
      type: 'text'
    },
    {
      data: 'level',
      type: 'numeric',
      numericFormat: {
        pattern: '0.0000'
      }
    },
    {
      data: 'units',
      type: 'text'
    },
    {
      data: 'asOf',
      type: 'date',
      dateFormat: 'MM/DD/YYYY'
    },
    {
      data: 'onedChng',
      type: 'numeric',
      numericFormat: {
        pattern: '0.00%'
      }
    }
  ],
  stretchH: 'all',
  width: 450,
  autoWrapRow: true,
  height: 487,
  maxRows: 22,
  rowHeaders: true,
  colHeaders: [
    'ID',
    'Country',
    'Code',
    'Currency',
    'Level',
    'Units',
    'Date',
    'Change'
  ]
};
var hot = new Handsontable(hotElement, hotSettings);

Странное поведение заключается в том, что Handsontable UI или электронная таблица не будут отображаться, только текст требования лицензии v.7.0 в нижнем колонтитуле.

Я подтвердил, что данные загружаются, запустив console.log(hot.getSourceData()), который показывает правильные данные сверху. Если данные были загружены и отображены правильно, в заголовке будет показано 8 заголовков столбцов, определенных выше, например: 

<thead><tr><th class=""><div class="relative"><span class="colHeader cornerHeader">&nbsp;</span></div></th><th class=""><div class="relative"><span class="colHeader">ID</span></div></th><th class=""><div class="relative"><span class="colHeader">Country</span></div></th><th class=""><div class="relative"><span class="colHeader">Code</span></div></th><th class=""><div class="relative"><span class="colHeader">Currency</span></div></th><th class=""><div class="relative"><span class="colHeader">Level</span></div></th><th class=""><div class="relative"><span class="colHeader">Units</span></div></th><th class=""><div class="relative"><span class="colHeader">Date</span></div></th><th class=""><div class="relative"><span class="colHeader">Change</span></div></th></tr></thead>

вместо этого я получаю: 

<thead><tr><th class=""><div class="relative"><span class="colHeader cornerHeader">&nbsp;</span></div></th><th class=""><div class="relative"><span class="colHeader">ID</span></div></th></tr></thead>

но ничего не отображается, и я получаю только белый фон по умолчанию. Единственным доказательством того, что для начала был включен Handsontable, является распечатка текста лицензии.

А вот действительно странная часть. Загружая страницу и взаимодействуя с ней в Chrome с помощью Inspect, она иногда визуализируется, но я не вижу никакой последовательности в том, когда это происходит и в любом случае, для меня это не имеет никакого смысла.

Если я переключаюсь с недавней версии Handsontable v. 7.0.2 на 6.2.2, JS в комплекте становится на 300 кбайт легче! и ошибка отличается тем, что столбец идентификатора будет отображаться с указанными идентификаторами, а когда выбрана одна ячейка, отображается остальная часть электронной таблицы, и все в порядке.

...