Question

我现在正在关注this视频教程，而我却坚持使用简单的HelloWorld应用程序。在我被卡住的位置12m:31s时，它应显示HelloWorld但不会显示。

该应用程序正在使用SystemJs，React和JSX。

要创建应用程序，请在终端中执行以下步骤（需要节点和jspm）：

npm init（enter致所有人）
jspm init（enter几乎全部，除了使用babel）
jspm install fetch=npm:whatwg-fetch
jspm install react
创建应用子文件夹创建main.js并将我的代码复制到其中
在根目录中创建index.html。
然后使用serve

我认为问题是我的本地服务器。我正在使用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>

Answer 1

好的，我已经弄清楚了。

在视频教程中提到过，但我认为不需要它。无论如何，它是必需的。

将blacklist: []添加到config.js内的babelconfig配置!!

来自Babel homepage：

jspm目前禁用JSX支持。要重新启用它，请在jspm配置文件中将"blacklist": []添加到babelOptions。

添加此Babel会自动检查imports / exports并发送jsx。

Answer 2

我不清楚这个教程，但JSX需要在加载JSX文件之前包含JSX转换器。然后它会查找任何具有type =“text / jsx”的脚本标记，以便编译为常规JavaScript。

听起来好像这个教程可能会使这个问题复杂化。

Answer 3

当我在浏览器上进行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>

Answer 4

似乎当前使用jsx和jspm（使用jspm 0.16。*无论如何）的方法是安装：

jspm install npm:jspm-loader-jsx

这是我设法让它发挥作用的唯一方法。我没有必要将黑名单设置为[]。我正在使用.js扩展程序。

在经过多个小时尝试其他事情并在网上寻求帮助后，我从this blog post了解了jspm-loader-jsx。

在jspm 0.17。*（目前处于测试阶段），似乎可能有不同的方式，但至少它是actually covered in the jspm docs。

如何使用JSX在本地运行SystemJS / React演示？

4 个答案: