[英]How to do cytoscape initialization with Typescript?
我用Typescript构建了一个React组件,它使用cytoscape (及其类型 )作为无头模型。 我的目标是创建一个NPM包,以便我可以直接在其他项目中导入它。
我的图书馆:
npm install
我的组件时不会: Uncaught ReferenceError: cytoscape is not defined at new WbsLayout
。 尽管在安装我的组件时cytoscape自动安装在node_modules中。 WbsLayout.tsx:
export class WbsLayout {
//...
public cy: Cy.Core;
constructor(graph: any, Options?: Options) {
this.cy = cytoscape({ // <-- Works or fails, see cases #1 and #2 explained above
headless: true,
elements: graph
});
//...
}
//...
}
请注意,我没有import cytoscape from 'cytoscape'
我的组件源中的任何地方的import cytoscape from 'cytoscape'
(或任何类似的方式) import cytoscape from 'cytoscape'
,因为我没有任何看起来像使用Typescript和cytoscape的类型定义的方式,我不需要它使我的组件与html中导入的cytoscape一起工作。 也许这是一个NPN包的问题,但......
Wbs.tsx:
一个简单的React组件,它接收prop WbsLayout。
declare namespace Cy {
//...
interface Core { }
//...
interface Static {
(options?: Cy.CytoscapeOptions): Core;
(extensionName: string, foo: string, bar: any): Core;
version: string;
}
}
declare module "cytoscape" {
export = cytoscape;
}
declare var cytoscape: Cy.Static;
Wbs.tsx
, WbsLayout.tsx
和其他使用Webpack 2捆绑到@nodeject/wbs-react
:
module.exports = {
entry: {
'test/index': './src/test.tsx',
'dist/index': './src/index.tsx'
},
output: {
filename: "./[name].js",
libraryTarget: 'umd',
library: 'wbs-react',
umdNamedDefine: true
},
devtool: "source-map",
resolve: {
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
node: {
fs: "empty",
child_process: "empty"
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: "source-map-loader"
},
{
test: /\.tsx?$/,
loader: "ts-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
]
},
externals: {
"react": {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react'
},
"react-dom": {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom'
},
"cytoscape": {
root: 'Cy',
commonjs2: 'cytoscape',
commonjs: 'cytoscape',
amd: 'cytoscape'
},
"chai": {
root: 'chai',
commonjs2: 'chai',
commonjs: 'chai',
amd: 'chai'
}
}
};
{
"compilerOptions": {
"outDir": "./temp/",
"sourceMap": false,
"noImplicitAny": true,
"module": "commonjs",
"target": "es2015",
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"jsx": "react"
},
"exclude": [
"node_modules",
"dist",
"temp",
"test"
]
}
import React from 'react';
import ReactDOM from 'react-dom';
import {Wbs, WbsLayout} from '@nodeject/wbs-react';
let graph = {
nodes: [
{ data: { id: '1' } },
{ data: { id: '1.1', parent: '1' } }
],
edges: [
{ data: { id: 'e1', source: '1', target: '1.1' } }
]
};
layout: new WbsLayout(graph); // <-- Fails here (case #2)
ReactDOM.render(<Wbs layout={layout}/>, document.querySelector('#wbs_example'));
我注意到,如果我从webpack的外部完全删除了cytoscape,我就找到了答案。 这是我需要做的:
"cytoscape": {
root: 'Cy',
commonjs2: 'cytoscape',
commonjs: 'cytoscape',
amd: 'cytoscape'
}
必须是:
"cytoscape": {
root: 'cytoscape', <--------
commonjs2: 'cytoscape',
commonjs: 'cytoscape',
amd: 'cytoscape'
}
你试过导入它吗?
const cytoscape = require('cytoscape');
如果是,那么你也可以发布你的tsconfig.json
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.