如何使用 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):
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>
我对本教程没有特别的了解,但 JSX 需要在加载 JSX 文件之前包含 JSX 转译器。然后它会查找任何具有 type="text/jsx" 的脚本标记以编译为常规 JavaScript.
听起来这个教程可能把这件事复杂化了。
好的,我知道了。
视频教程中提到了,但我认为不需要。无论如何,这是必需的。
在config.js里面的babelconfig配置中添加blacklist: []
!!
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>
我正在关注 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>
我对本教程没有特别的了解,但 JSX 需要在加载 JSX 文件之前包含 JSX 转译器。然后它会查找任何具有 type="text/jsx" 的脚本标记以编译为常规 JavaScript.
听起来这个教程可能把这件事复杂化了。
好的,我知道了。
视频教程中提到了,但我认为不需要。无论如何,这是必需的。
在config.js里面的babelconfig配置中添加blacklist: []
!!
JSX support is currently disabled by jspm. To re-enable it, add
"blacklist": []
tobabelOptions
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>