Javascript Firefox插件SDK:Babel支持_Javascript_Firefox_Reactjs_Firefox Addon Sdk_Babeljs

Javascript Firefox插件SDK:Babel支持

javascript firefox reactjs

Javascript Firefox插件SDK:Babel支持,javascript,firefox,reactjs,firefox-addon-sdk,babeljs,Javascript,Firefox,Reactjs,Firefox Addon Sdk,Babeljs,我正在尝试使用React作为我正在开发的firefox插件的一部分。只要我不使用jsx，React就可以正常工作。Babel不工作-因为我无法指定我添加的脚本的类型我正在做： tabs.open({ url: 'index.html', onReady: function( tab ){ var worker = tab.attach({

我正在尝试使用React作为我正在开发的firefox插件的一部分。只要我不使用jsx，React就可以正常工作。Babel不工作-因为我无法指定我添加的脚本的类型

我正在做：

tabs.open({                                                   
    url: 'index.html',
    onReady: function( tab ){
        var worker = tab.attach({
            contentScriptFile: [
                './jquery-2.1.4.min.js',
                '../node_modules/react/dist/react.js',
                '../node_modules/react-dom/dist/react-dom.js',
                '../node_modules/babel-preset-react/index.js',
                './js/main.js', // the file i need to specify as type: text/babel
            ],
        });
   }
);

理想情况下，我可以在

'./js/main.js'

脚本上设置一个type属性，但文档似乎没有任何内容。

诀窍是直接在html中加载react、jquery、babel和jsx，就像通常那样。必须使用

contentScriptFile

param加载的javascripts文件是那些需要加载逻辑才能与addon主js文件通信的文件

有效html的示例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="react-with-addons.js"></script>
    <script src="react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <h1>Hello!</h1>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <p>Hello, world!</p>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>


你好，反应！
你好
ReactDOM.render(
你好，世界！，
document.getElementById（'示例'）
);

如果您告诉我在html/内容脚本中需要做什么，我可以给您一个示例，说明如何与主脚本进行通信。

诀窍是直接在html中加载react、jquery、babel和jsx，就像您通常做的那样。必须使用

contentScriptFile

param加载的javascripts文件是那些需要加载逻辑才能与addon主js文件通信的文件

有效html的示例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="react-with-addons.js"></script>
    <script src="react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <h1>Hello!</h1>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <p>Hello, world!</p>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>


你好，反应！
你好
ReactDOM.render(
你好，世界！，
document.getElementById（'示例'）
);

如果您告诉我在html/内容脚本中需要做什么，我可以给您一个示例，说明如何与主脚本进行通信。

最初，我就是这么做的。我在使用它时遇到了困难-可能是因为我在使用附加脚本时遇到了一般性的沟通问题。稍后我会再看一看，看看是否可以重新考虑。最初，我就是这么做的。我在使用它时遇到了困难-可能是因为我在使用附加脚本时遇到了一般性的沟通问题。稍后我会再看一看，看看是否可以重新考虑。