将节点模块导入 typescript/systemjs答案

【问题标题】：Import node module to typescript/systemjs将节点模块导入 typescript/systemjs
【发布时间】：2017-04-03 12:21:42
【问题描述】：

我正在尝试使用react blueprint library，所以我npm install 它然后我尝试像这样导入它：

import { Spinner } from "@blueprintjs/core"

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

我认为这与打字有关，因为我尝试过的模块上有一个tsfile

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

或

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

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

【问题讨论】：

标签： node.js reactjs typescript systemjs

【解决方案1】：

您需要配置 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 变量。

【讨论】：

非常感谢。这真的很有帮助