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

Question

我正在关注 this video tutorial at the moment and I'm stuck with the simple HelloWorld App. At the time position 12m:31s 是我卡住的地方它应该显示 HelloWorld 但它没有。

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

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

npm init（enter 全部）
jspm init（enter 几乎所有，除了使用 babel）
jspm install fetch=npm:whatwg-fetch
jspm install react
创建一个 app 子文件夹 create 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

我对本教程没有特别的了解，但 JSX 需要在加载 JSX 文件之前包含 JSX 转译器。然后它会查找任何具有 type="text/jsx" 的脚本标记以编译为常规 JavaScript.

听起来这个教程可能把这件事复杂化了。

Answer 2

好的，我知道了。

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

在config.js里面的babelconfig配置中添加blacklist: []!!

来自Babel homepage：

JSX support is currently disabled by jspm. To re-enable it, add "blacklist": [] to babelOptions in the jspm configuration file.

有了这个添加的 Babel 将自动检查 imports / exports 并转译 jsx。

Answer 3

目前将 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。

Answer 4

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

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

How to run SystemJS/React demo locally with JSX?

javascript

reactjs

react-jsx

systemjs

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

How to run SystemJS/React demo locally with JSX?

javascript

reactjs

react-jsx

systemjs

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