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

我现在正在关注这个视频教程，我被简单的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创建到根目录中。
然后用发球运行它

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

当我在浏览器上制作 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>

好的，我已经想通了。

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

在 config.js 中将blacklist: []添加到 babelconfig 的配置中！！

从 Babel 主页：

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

添加此内容后，Babel 将自动检查imports / exports并转换 jsx。

我对本教程一无所知，但是JSX需要在加载JSX文件之前包含JSX转译器。然后，它会查找任何具有 type="text/jsx" 的脚本标签，以编译为常规 JavaScript。

听起来本教程可能使此事复杂化。

似乎目前将 jsx 与 jspm 一起使用(无论如何使用 jspm 0.16.*)的方法是安装：

jspm install npm:jspm-loader-jsx

这是我设法让它工作的唯一方法。我不必将黑名单设置为 []。我正在使用.js扩展。

我从这篇博文中了解到jspm-loader-jsx，经过几个小时的尝试，并在网上搜索帮助。

在 jspm 0.17.*(目前处于测试阶段)中，似乎可能有不同的方法，但至少它实际上包含在 jspm 文档中。

相关内容

最新更新

热门标签：