5

現時点では、このビデオ チュートリアルに従っていますが、単純な HelloWorld アプリにこだわっています。時間位置12m:31sは、私が立ち往生している場所であり、表示されるはずですが、表示HelloWorldされません。

アプリは SystemJs、React、JSX を使用しています。

アプリを作成するには、端末で次の手順を実行します (node と jspm が必要です)。

  • npm init(enter全員に)
  • jspm init( enterbabel を使用する場合を除き、ほぼすべてのユーザーに)
  • jspm install fetch=npm:whatwg-fetch
  • jspm install react
  • アプリのサブフォルダーを作成するmain.jsコードを作成してそこにコピーする
  • index.htmlルートディレクトリに作成します。
  • 次に、サーブで実行します

問題は私のローカルサーバーだと思います。nodejs で実行していhttp-serverますが、JSX は JS にトランスパイルされていないと思います。また、上記のserveサーバーが機能していません。

ブラウザ コンソールに次のエラー メッセージが表示されます。

Potentially unhandled rejection [3] SyntaxError: Error loading "app/main"
[...] Unexpected token <

どうすれば機能しますか？

これが私のコードです。まさにビデオのコードです（jsファイルが追加されていないため、ここでは実行されません）：

//app/main.js
import 'fetch';

import React from 'react';

console.log('Hello world');

class HelloWorld extends React.Component {
	render() {
		return <p>hello world</p>;
	}
}

React.render(<HelloWorld />, document.body);
<!-- index.html -->
<!doctype html>
<html>
<head>
	<title>First jspm</title>
	<script type="text/javascript" src="jspm_packages/system.js"></script>
	<script type="text/javascript" src="config.js"></script>
	<script>
		System.import('app/main');
	</script>
</head>
<body>

</body>
</html>

4

4 に答える 4

5

ブラウザで es6+react のデモに取り組んでいるときに同様の問題が発生し、最終的に解決します

<!doctype html>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.12/system.js"></script>

<script>
SystemJS.config({
    baseURL:'https://unpkg.com/',
    defaultExtension: true,
    meta: {
        '*.jsx': {
            'babelOptions': {
                react: true
            }
        }
    },
    map: {
        'plugin-babel': 'systemjs-plugin-babel@latest/plugin-babel.js',
        'systemjs-babel-build': 'systemjs-plugin-babel@latest/systemjs-babel-browser.js',
        'react': 'react@15.3.2/dist/react.min.js',
        'react-dom': 'react-dom@15.3.2/dist/react-dom.min.js'
    },
    transpiler: 'plugin-babel'
});


SystemJS.import('./comp-a.jsx').then(function (m) {
    console.log(m);
});
</script>
于 2017-05-10T02:40:34.353 に答える
4

わかりました、私はそれを理解しました。

ビデオチュートリアルで言及されていましたが、必要ないと思いました。とにかく必須です。

blacklist: []config.js内のbabelconfigの設定に追加!!

Babelのホームページから：

JSX サポートは現在、jspm によって無効になっています。再度有効にするには、jspm 構成ファイルにを追加"blacklist": []します。babelOptions

この追加により、Babel は自動的imports / exportsに jsx をチェックしてトランスピルします。

于 2015-05-14T19:43:02.610 に答える
3

このチュートリアルについて具体的にはわかりませんが、JSX ファイルをロードする前に、JSX トランスパイラーを JSX に含める必要があります。次に、type="text/jsx" を持つスクリプト タグを探して、通常の JavaScript にコンパイルします。

このチュートリアルがこの問題を複雑にしている可能性があるようです。

于 2015-05-14T17:32:51.370 に答える
0

jsx を jspm で (とにかく jspm 0.16.* で) 使用する現在の方法は、次のようにインストールすることです。

jspm install npm:jspm-loader-jsx

これが私がそれを機能させることができた唯一の方法です。ブラックリストを [] に設定する必要はありませんでした。.js 拡張子を使用しています。

他のことを何時間も試し、Web でヘルプを検索した後、このブログ投稿から jspm-loader-jsx について学びました。

jspm 0.17.* (現在はベータ版) では、別の方法があるように見えますが、少なくともjspm docs で実際にカバーされています。

于 2016-07-15T02:55:30.590 に答える