Question

我试图将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'脚本上设置类型属性，但文档似乎没有任何内容。

Answer 1

诀窍是直接在你的html中加载react，jquery，babel和你的jsx，就像你通常那样。您必须使用contentScriptFile参数加载的javascripts文件是加载逻辑以与插件主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>

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

Firefox Addon SDK：Babel支持

1 个答案: