2

我想使用 babel-standalone 在浏览器中加载我的 reactjs 代码。因此，我正在寻找 babel 独立（或任何其他解决方案）的正确配置，以便在使用 babel 时在浏览器中加载 ES 模块。

我在下面创建了 Glitch 来显示我的问题。 https://glitch.com/edit/#!/example-es-modules-with-babel?path=index.html:1:0

编辑：上面的链接现在包含一个工作示例。

我花了相当多的时间寻找和尝试事情，但我自己似乎很难弄清楚这一点。所以我想知道是否有人可以帮助我超越 Glitch 的工作。

有关类似问题的讨论，请参见：https ://github.com/babel/babel/issues/9976

编辑：动机

这只是为了好玩和像在代码笔中那样对想法进行原型设计。创建一个开发设置并捆绑 js 代码对于任何非平凡的应用程序来说都是最好的事情。

4

1 回答 1

2

通过进行一些更改，我让它与您的代码一起使用。这是故障链接。我将您的原始代码和修改后的版本都放在了这篇文章的底部——在您的 SO 问题中包含代码是个好主意，以防万一出现故障或您的项目被删除。

变化：

  • 从 AMD 切换到 UMD。AMD 使用 require.js，就转译而言，这似乎与 babel-standalone 冲突。作为该过程的一部分，还删除了 require.js 脚本。
  • 使用 script 标签显式导入 app.js：
    • <script type="text/babel" src="./app.js" data-plugins="transform-modules-umd"></script>
    • 如果要切换到内联模块，则需要使用该data-module属性。请参阅对 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>
于 2019-06-08T08:01:52.903 回答