如何使用 Babel-Standalone 在客户端 React JSX 中执行导入/导出
Posted
技术标签:
【中文标题】如何使用 Babel-Standalone 在客户端 React JSX 中执行导入/导出【英文标题】：How to perform import/export in client-side React JSX using Babel-Standalone 【发布时间】：2019-05-27 02:27:00 【问题描述】：我正在使用 Babel-Standalone 在 React 应用程序中使用 JSX，而不使用 NPM。 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】：Babel 不是模块捆绑器或模块系统实现，babel 只是一个转译器，用于提供对浏览器或节点不支持的最新 JS 功能的访问。 如果您想在没有任何第三方（如 webpack、rollup 等）的情况下使用 ES 模块，请查看https://developers.google.com/web/fundamentals/primers/modules。
您应该能够执行以下操作：
<script type="module">
import MyExport from "./url/to/MyExport.mjs";
const App = () =>
return (
<div>Hello</div>
);
;
ReactDOM.render(<App />, document.querySelector("#root"));
</script>
通过脚本标签的JS模块仅在最新版本的主要浏览器中支持：https://caniuse.com/#feat=es6-module
另外，您需要解决 babel-standalone 需要您的脚本标签为 text/babel 编辑： 解决方法是使用 data-type="module" 标签以及作为 type="text/babel" 标签：https://babeljs.io/docs/en/babel-standalone#usage
【讨论】：
【参考方案2】：有一个解决方案：（1）包含导出的JSX脚本必须与其他元素一起包含在SCRIPT元素中；它不能简单地被另一个脚本引用。 (2) 该 JSX 脚本和从中导入的 JSX 脚本都必须具有自定义属性 data-plugins="transform-es2015-modules-umd" 以及预期的属性 type="text/babel"。运行以下 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>
我希望这对其他人有帮助。
【讨论】：
这在 babel-standalone v6 中有效。它在 babel-standalone v7 中不起作用，它不知道 'transform-es2015-modules-umd' 是什么。 经过数小时的搜索，这个答案帮助我让它工作。谢谢！ @EvanThompson 和 babeljs.io/blog/2017/12/27/… @Tom 谢谢，我遇到了同样的问题，它对我有用。但是，如果我想将另一个子组件导入 MyExport.js 本身，那么它就行不通了！！有什么想法吗？【参考方案3】：你应该首先包含所有需要的组件文件，然后运行 app js 文件 示例：
<div id="root-react"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>
文件的树是这样的：
js/app.js js/subcomponent.js
app.js 内容例如：
"use strict";
class MainReact extends React.Component
constructor(props)
super(props);
render()
return (
<div>
<strong>app.js</strong> is loaded<br/>
<SubComponent />
</div>
)
ReactDOM.render(<MainReact />, document.getElementById("root-react"));
subcomponent.js 内容：
"use strict";
class SubComponent extends React.Component
constructor(props)
super(props);
render()
return (
<span> SubComponent-is-working </span>
)
customElements.define('subcomponent', SubComponent);
html文件中包含的文件应该是：
<script type="text/babel" src="js/subcomponent.js"></script>
<script type="text/babel" src="js/app.js"></script>
希望它对某人有所帮助。 CodePen demo
【讨论】：
但您的示例不包括使用“import”以上是关于如何使用 Babel-Standalone 在客户端 React JSX 中执行导入/导出的主要内容，如果未能解决你的问题，请参考以下文章
将 typescript 与 Babel 7 Standalone 一起使用
在没有 Webpack/Bundlers 的 PHP 中镜像 Vue 组件