Question

我正在尝试使用react blueprint library，所以我npm install然后我尝试将其导入为：

import { Spinner } from "@blueprintjs/core"

我正在system.src.js:1051 GET http://localhost:8888/@blueprintjs/core 404 (Not Found)

我认为这与打字有关，因为我试过的模块上有一个ts文件

/// <reference path="../node_modules/@blueprintjs/core/dist/index.d.ts" />

或

/// <reference path="node_modules/@blueprintjs/core/dist/index.d.ts" />

我仍然遇到同样的错误。 我是Typescript的新手，我该如何使用这样的节点模块？

Answer 1

您需要配置SystemJS，以便它可以在浏览器中查找并加载所有必需的模块。有关一般说明，请参阅this answer。以下是创建蓝图微调器的完整最小示例：

安装先决条件

df = pd.DataFrame(
    dict(
        name=list('ABCDEFGACEF'),
        dept=list('xyxyzxyzyxz')
    )
)

g = df.groupby('name')
pd.concat([g.dept.apply(list), g.first().drop('dept', 1)], axis=1).reset_index()

test.tsx中的示例代码

npm i @blueprintjs/core
npm i react
npm i react-dom
npm i react-addons-css-transition-group
npm i @types/react
npm i @types/react-dom
npm i @types/dom4
npm i typescript
npm i systemjs

示例网页

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Spinner } from "@blueprintjs/core";

const mySpinner = <Spinner/>;

ReactDOM.render(mySpinner, document.body);

注意：看起来SystemJS无法使用<!doctype html> <html> <head> <link href="node_modules/@blueprintjs/core/dist/blueprint.css" rel="stylesheet" /> <script src="node_modules/systemjs/dist/system.src.js"></script> <script> window.process = { env: {}}; System.config({ map: { 'react': 'node_modules/react', 'react-dom': 'node_modules/react-dom', 'react-addons-css-transition-group': 'node_modules/react-addons-css-transition-group/index.js', 'fbjs': 'node_modules/fbjs', 'tether': 'node_modules/tether/dist/js/tether.js', 'dom4': 'node_modules/dom4/build/dom4.max.js', '@blueprintjs/core': 'node_modules/@blueprintjs/core/dist', 'classnames': 'node_modules/classnames/index.js', 'object-assign': 'node_modules/object-assign/index.js', 'pure-render-decorator': 'node_modules/pure-render-decorator/index.js' }, packages: { 'react': { main: 'lib/React.js' }, 'react-dom': { main: 'lib/ReactDOM.js' }, 'fbjs': {}, '@blueprintjs/core': { main: 'index.js' }, '@blueprintjs/core/common': { main: 'index.js' }, '@blueprintjs/core/components': { main: 'index.js' } } }); System.import('./test.js').then(function(t) { }).catch(function(e) { console.error(e); }); </script> </head> <body> </body> </html>和node_modules/react/dist/react.js中提供的捆绑加载反应和反应。但是，只要您在浏览器中定义node_modules/react-dom/dist/react-dom.js变量，它就会加载来自node_modules/react/lib和node_modules/react-dom/lib的各个源文件的所有内容。

将节点模块导入typescript / systemjs

1 个答案: