0

我正在尝试 browserify 并遇到了我的项目结构的问题。我通过 index.js 的路由向 index.jade 发送一个数组。这似乎有效，并且在 index.jade 中显示了数组的长度：

extends layout

block content
  h1= title 
  p= spectra.length
  div#cy
  script(src="javascripts/code.js")

Code.js 是由 browserify 打包的一些类（ES6 是 babelified）。在我尝试使用光谱之前，这似乎有效：

"use strict";
const GraphSpectrum = require("./GraphSpectrum");
let gms = new GraphSpectrum(spectra[0]); 
var cy = window.cy = cytoscape({ //...

ReferenceError：光谱未定义

browserify 创建 code.js 并在生成代码的末尾包含我的客户端代码：

......
},{}],4:[function(require,module,exports){
"use strict";

console.log(spectra.length);
console.log(spectra);

const GraphSpectrum = require("./GraphSpectrum");
const MSSpectrum = require("./MSSpectrum");

let mgfSection = ["BEGIN IONS", "PEPMASS=491.222686767578", "CHARGE=2", "TITLE=491.222686767578_1494.17_scan=6268_2014090922Mix2alkylISW10noEclu,seq={ATNYNAGDR},sup={4}", "SCANS=0", "491.2227\u00092", "128.1677\t34.3", "143.9659    14.8", "145.1864    1063.5", "147.2310  164.8", "148.0274   88.9", "152.2586    32.3", "153.1165    141.1", "155.0703   453.6", "156.2521   121.2", "158.0017   158.1", "162.1551   94.7", "163.1792    69.3"];
let msms = new MSSpectrum();
msms.parseMGFSection(mgfSection);
let gms = new GraphSpectrum(msms);
console.log(gms.nodes);
console.log(gms.getEdges('sequence'));
var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  boxSelectionEnabled: false,
  autounselectify: true,
  style: [{
    selector: 'node',
    css: {
      'content': 'data(id)',
      'text-valign': 'center',
      'text-halign': 'center'
    }
  }, {
    selector: '$node > node',
    css: {
      'padding-top': '1px',
      'padding-left': '1px',
      'padding-bottom': '1px',
      'padding-right': '1px',
      'text-valign': 'top',
      'text-halign': 'center',
      'background-color': '#bbb'
    }
  }, {
    selector: 'edge',
    css: {
      'curve-style': 'bezier',
      'target-arrow-shape': 'triangle'
    }
  }, {
    selector: ':selected',
    css: {
      'background-color': 'black',
      'line-color': 'black',
      'target-arrow-color': 'black',
      'source-arrow-color': 'black'
    }
  }],
  elements: {
    nodes: gms.nodes,
    edges: gms.getEdges('sequence') 
  },
  layout: {
    name: 'preset',
    padding: 5
  }
}); 

},{"./GraphSpectrum":1,"./MSSpectrum":3}]},{},[4]);

当我删除光谱参考时，代码有效并显示结果。如何访问此代码部分中 pug 中可用的全局变量？

我错过了什么？

谢谢你，延斯

4

1 回答 1

0

我忽略的是 Jade/Pug 可用的变量不可用于浏览器中的客户端脚本。这些必须先通过。此处描述了如何执行此操作的方法：变量、全局对象和玉中的 console.log

就我而言，我补充说：

script(type="text/javascript")!= "var clientSpectra = " + JSON.stringify(spectra)

到 index.jade

于 2019-03-10T17:53:58.663 回答