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

How to run SystemJS/React demo locally with JSX?

我正在关注 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):

我认为问题出在我的本地服务器上。我 运行 将它与 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>

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

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

好的,我知道了。

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

在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。

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

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