如何使用 Typescript 进行 cytoscape 初始化?
How to do cytoscape initialization with Typescript?
我用 Typescript 构建了一个 React 组件,它使用 cytoscape (and its types) 作为无头模型。我的 objective 是创建一个 NPM 包,这样我就可以直接在其他项目中导入它。
我的图书馆:
- 当我将 cytoscape.js 作为静态资产导入 index.html 时有效
- 当我
npm install
我的组件在新的 es6 应用程序中时不会:
Uncaught ReferenceError: cytoscape is not defined at new WbsLayout
。尽管在安装我的组件时 node_modules 中自动安装了 cytoscape。
打字稿来源
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'
(或任何类似的方式),因为我没有任何东西,因为 Typescript 和 cytoscape 的类型定义方式似乎都没有,我不需要它来使我的组件与 html 中导入的 cytoscape 一起工作。也许这是 NPN 包的问题...
Wbs.tsx:
接收道具 WbsLayout 的简单 React 组件。
cytoscape 的分型(仅相关部分)
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;
Webpack 2 配置
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'
}
}
};
tsconfig.json
{
"compilerOptions": {
"outDir": "./temp/",
"sourceMap": false,
"noImplicitAny": true,
"module": "commonjs",
"target": "es2015",
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"jsx": "react"
},
"exclude": [
"node_modules",
"dist",
"temp",
"test"
]
}
新的 es6 应用程序源
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'));
您是否尝试过将其导入为..
const cytoscape = require('cytoscape');
如果是,那么你也可以 post 你的 tsconfig.json
。
我注意到如果我从 webpack 的外部完全删除 cytoscape,它就可以工作,我找到了答案。这是我需要做的:
"cytoscape": {
root: 'Cy',
commonjs2: 'cytoscape',
commonjs: 'cytoscape',
amd: 'cytoscape'
}
必须是:
"cytoscape": {
root: 'cytoscape', <--------
commonjs2: 'cytoscape',
commonjs: 'cytoscape',
amd: 'cytoscape'
}
我用 Typescript 构建了一个 React 组件,它使用 cytoscape (and its types) 作为无头模型。我的 objective 是创建一个 NPM 包,这样我就可以直接在其他项目中导入它。
我的图书馆:
- 当我将 cytoscape.js 作为静态资产导入 index.html 时有效
- 当我
npm install
我的组件在新的 es6 应用程序中时不会:Uncaught ReferenceError: cytoscape is not defined at new WbsLayout
。尽管在安装我的组件时 node_modules 中自动安装了 cytoscape。
打字稿来源
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'
(或任何类似的方式),因为我没有任何东西,因为 Typescript 和 cytoscape 的类型定义方式似乎都没有,我不需要它来使我的组件与 html 中导入的 cytoscape 一起工作。也许这是 NPN 包的问题...
Wbs.tsx:
接收道具 WbsLayout 的简单 React 组件。
cytoscape 的分型(仅相关部分)
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;
Webpack 2 配置
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'
}
}
};
tsconfig.json
{
"compilerOptions": {
"outDir": "./temp/",
"sourceMap": false,
"noImplicitAny": true,
"module": "commonjs",
"target": "es2015",
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"jsx": "react"
},
"exclude": [
"node_modules",
"dist",
"temp",
"test"
]
}
新的 es6 应用程序源
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'));
您是否尝试过将其导入为..
const cytoscape = require('cytoscape');
如果是,那么你也可以 post 你的 tsconfig.json
。
我注意到如果我从 webpack 的外部完全删除 cytoscape,它就可以工作,我找到了答案。这是我需要做的:
"cytoscape": {
root: 'Cy',
commonjs2: 'cytoscape',
commonjs: 'cytoscape',
amd: 'cytoscape'
}
必须是:
"cytoscape": {
root: 'cytoscape', <--------
commonjs2: 'cytoscape',
commonjs: 'cytoscape',
amd: 'cytoscape'
}