我可以在浏览器中与Babel一起使用ES模块，而不捆绑我的代码吗？ [英] Can I use ES modules in browser with babel, without bundling my code?
本文介绍了我可以在浏览器中与Babel一起使用ES模块，而不捆绑我的代码吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用babel-Standalone在浏览器中加载我的reactjs代码。 因此，我正在寻找正确的Babel独立配置(或任何其他解决方案)，以便在使用Babel的同时在浏览器中加载ES模块。
我创建了下面的故障以显示我的问题。 https://glitch.com/edit/#!/example-es-modules-with-babel?path=index.html:1:0
编辑：以上链接现在包含工作示例。
我花了相当多的时间去寻找和尝试，但是我自己似乎很难弄明白这一点。 所以我想知道是否有人能帮我解决故障。
有关类似问题的讨论，请参阅：https://github.com/babel/babel/issues/9976
编辑：激励
这只是为了好玩，也是为了像编码员一样对想法进行原型制作。 创建一个dev设置并捆绑js代码对于任何重要的应用程序来说都是最好的事情。
推荐答案
我做了一些更改，使其可以与您的代码一起使用。Here is the glitch link。我把你的原始代码和修改后的版本都放在这篇帖子的底部-好主意，在你的SO问题中包括代码，以防出现故障或你的项目被删除。
更改：
- 从AMD切换到UMD。AMD使用Require.js，就传输而言，它似乎与Babel-Standalone相冲突。作为该过程的一部分，我还删除了requi.js脚本。
- 使用脚本标签显式导入的app.js：
<script type="text/babel" src="./app.js" data-plugins="transform-modules-umd"></script>- 如果要切换到内联模块，则需要使用
data-module属性。请参见this change to babel-standalone。
原始HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<script src="https://unpkg.com/@babel/standalone@7.4.4/babel.js"></script>
<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://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
<script>
Babel.registerPreset("my-preset", {
presets: [
[Babel.availablePresets["es2015"], { "modules": false }],
[Babel.availablePresets["react"]]
],
plugins: [
[Babel.availablePlugins["transform-modules-amd"]]
],
moduleId: "main"
});
</script>
<script type="text/babel" data-presets="my-preset">
import App from './app.js'
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</head>
<body>
<p>Output should appear below.</p>
<hr/>
<div id="root"></div>
</body>
</html>
修改后的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<script src="https://unpkg.com/@babel/standalone@7.4.4/babel.js"></script>
<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://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script> -->
<script>
Babel.registerPreset("my-preset", {
presets: [
[Babel.availablePresets["es2015"], { "modules": false }],
[Babel.availablePresets["react"]]
],
plugins: [
[Babel.availablePlugins["transform-modules-umd"]]
],
moduleId: "main"
});
</script>
<script type="text/babel" src="./app.js" data-plugins="transform-modules-umd"></script>
<script type="text/babel" data-presets="my-preset">
import App from './app'
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</head>
<body>
<p>Output should appear below.</p>
<hr/>
<div id="root"></div>
</body>
</html>
和app.js保持不变：
export default () => <h1>It Works!</h1>
这篇关于我可以在浏览器中与Babel一起使用ES模块，而不捆绑我的代码吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
