将节点模块导入 typescript/systemjs
Import node module to typescript/systemjs
我正在尝试使用 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 的新手,如何使用这样的节点模块?
您需要配置 SystemJS,以便它可以在浏览器中找到并加载所有必需的模块。有关一般说明,请参阅 this answer。这是创建蓝图微调器的完整最小示例:
安装先决条件
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
test.tsx
中的示例代码
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Spinner } from "@blueprintjs/core";
const mySpinner = <Spinner/>;
ReactDOM.render(mySpinner, document.body);
示例网页
<!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>
注意:SystemJS 似乎无法使用 node_modules/react/dist/react.js
和 node_modules/react-dom/dist/react-dom.js
中提供的包加载 react 和 react-dom。但是,它可以从 node_modules/react/lib
和 node_modules/react-dom/lib
的各个源文件中加载所有内容,前提是您在浏览器中定义了 process
变量。
我正在尝试使用 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 的新手,如何使用这样的节点模块?
您需要配置 SystemJS,以便它可以在浏览器中找到并加载所有必需的模块。有关一般说明,请参阅 this answer。这是创建蓝图微调器的完整最小示例:
安装先决条件
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
test.tsx
中的示例代码import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Spinner } from "@blueprintjs/core";
const mySpinner = <Spinner/>;
ReactDOM.render(mySpinner, document.body);
示例网页
<!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>
注意:SystemJS 似乎无法使用 node_modules/react/dist/react.js
和 node_modules/react-dom/dist/react-dom.js
中提供的包加载 react 和 react-dom。但是,它可以从 node_modules/react/lib
和 node_modules/react-dom/lib
的各个源文件中加载所有内容,前提是您在浏览器中定义了 process
变量。