2016-11-19 6 views
0

私はreact blueprint libraryを使用しようとしていますので、私はそれをnpm installし、私が好き、それをインポートしてみました:インポートノード活字にするモジュール/ systemjs

import { Spinner } from "@blueprintjs/core"

私は思っsystem.src.js:1051 GET http://localhost:8888/@blueprintjs/core 404 (Not Found)

を取得していますそれはタイピングと関係があり、私が試したモジュールにはというファイルがありますから

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

または

​​

私はまだ同じエラーを取得しています。 私はTypescriptを初めて使っていますが、どうすればこのようなノードモジュールを使うことができますか?

答えて

2

ブラウザで必要なモジュールをすべて検索してロードできるように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); 

の例のWebページ

<!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.jsnode_modules/react-dom/dist/react-dom.jsで提供されているバンドルを使用して、SystemJSが反応して反応することができないようです。ただし、node_modules/react/libnode_modules/react-dom/libの個々のソースファイルからすべてを読み込むことができます。ただし、ブラウザに変数processを定義する必要があります。

+0

多くのThx。それは本当に役立った –

関連する問題