我可以在浏览器中与Babel一起使用ES模块，而不捆绑我的代码吗？

2022-02-25 00:00:00 javascript babeljs

我想使用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。

此外，请注意，您走的是一条您可能不想要的路线。在处理导出/导入/模块和多个组件文件的时候，您真的应该切换到webpack这样的捆绑包-这是有原因的，为什么大多数关于此问题的帖子都建议切换到它。

原始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>

相关文章