Js 函数不适用于 node 和 browserify

Js functions do not work with node and browserify

我是 Node 和 browserify 的初学者,我遇到了一个问题,如果我使用 browserify,它无法使用来自 html 的功能,来自错误的输入或按​​钮 pickCSV 未定义

因为它是 html 中的一个 onchange 但调用时它不起作用,如果我不使用 browserify 它工作正常,但我需要 browserify 因为我将使用节点通信 mysql 对于银行的 select,我接受对此应用程序的建议和对 运行 客户端节点

的提示

html

 <!DOCTYPE html>
   <html>
   <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user- 
    scalable=no" />
   <title>SIM TELEGESTÃO</title>
   <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
   <script src="node_modules/leaflet/dist/leaflet-src.js"></script>
   <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
   <div id="map"></div>
   <input type="file" id="inputCSV" onchange="pegarCSV(this)">
   <script src="bundle.js"></script>
   </body>
   </html>

JS

   // require modules
      var L = require('leaflet');
      var $ = require('jquery');
      var mysql = require('mysql');

      var tcsv = [];
      var nMuc;
      var arMuc= [];
      var bounds = [];
      var arMu = [];
      var leitorDeCSV = new FileReader();
      var tcsv1 = [];
      var achMuc;
      var lcz2;
      var selMuc = [];
      // Create the map
      var map = L.map('map').setView([-90.59431,-70.82561], 18);

      // Indicate leaflet the specific location of the images folder that it needs to render the page
      L.Icon.Default.imagePath = 'node_modules/leaflet/dist/images/';

      // Use OpenStreetMap tiles and attribution
      var osmTiles = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
      var attribution = '© OpenStreetMap contributors';

      // Create the basemap and add it to the map
      L.tileLayer(osmTiles, {
      maxZoom: 18,
      attribution: attribution
      }).addTo(map);


     function pegarCSV (inputFile){
      var file = inputFile.files[0];
      leitorDeCSV.readAsText(file);
      leitorDeCSV.onload = leCSV;
     }

为了 require 工作,browserify 将您的整个代码包装到一个函数中,从那时起,您在文件中定义的所有函数将不会在全局范围内可用。这和其他事情是您不应该使用内联事件处理程序(属性)来注册事件的原因,这些事件只适用于在全局范围内可见的函数。

你要做的是把<input type="file" id="inputCSV" onchange="pegarCSV(this)">改成<input type="file" id="inputCSV">

并将以下内容添加到文件末尾:

document.getElementById('inputCSV').addEventListener('change', 
  function(event) {
    pegarCSV(event.currentTarget);
  }, false)