5

我现在正在关注这个视频教程，我坚持使用简单的 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>

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 主页：

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

有了这个添加的 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 扩展名。

经过数小时尝试其他事情并在网上搜索帮助后，我从这篇博文中了解了 jspm-loader-jsx 。

在 jspm 0.17.*（目前处于测试阶段）中，似乎可能有不同的方式，但至少它实际上已包含在 jspm docs中。

于 2016-07-15T02:55:30.590 回答