我在不使用 NPM 的情况下使用 Babel-Standalone 在 React 应用程序中使用 JSX。 Babel 显然将“import”语句翻译成“require”语句；导入“require.js”和其他依赖项以使这项工作产生更多错误。
当然，必须有一种简单的方法来在客户端 JSX 的上下文中执行导入/导出。请指教(此处不寻求 Node/NPM/Webpack 解决方案；寻求适当库的 CDN 和导入语句的重写等)。
<!doctype html>
<html lang="en-us">
<head>
<title>React JSX Babel-Standalone Import/Export Problem</title>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// See MyExport.js text below this SCRIPT
// Goal: to employ <MyExport /> in the return of App.
// import MyExport from "./MyExport";
const App = () => {
return (
<div>Hello</div>
);
};
ReactDOM.render(<App />, document.querySelector("#root"));
</script>
<!-- MyExport.js:
const MyExport = () => {
return (
<div>MyExport</div>
);
};
export default MyExport;
-->
</body>
</html>
最佳答案
有一个解决方案: (1) 包含导出的 JSX 脚本必须与其他元素一起包含在 SCRIPT 元素中；如果没有，它不能简单地被另一个脚本引用。 (2) 该 JSX 脚本和从它导入的 JSX 脚本都必须具有自定义属性 data-plugins="transform-es2015-modules-umd" 以及预期属性 type="文本/通天塔”。运行以下 HTML，对问题中提供的内容进行修改，它提供了解决方案(您必须在本地创建 MyExport.js 才能运行它):
<!doctype html>
<html lang="en-us">
<head>
<title>React JSX Babel-Standalone Import/Export Problem</title>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./MyExport.js"></script>
<script data-plugins="transform-es2015-modules-umd" type="text/babel">
import MyExport from "./MyExport";
const App = () => {
return (
<MyExport/>
);
};
ReactDOM.render(<App />, document.querySelector("#root"));
</script>
<!-- MyExport.js:
const MyExport = () => {
return (
<div>MyExport element is imported!</div>
);
};
export default MyExport;
-->
</body>
</html>
我希望这对其他人有帮助。
关于javascript - 如何使用 Babel-Standalone 在客户端 React JSX 中执行导入/导出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53972473/