Firefox插件SDK：Babel支持

Question

I'm trying to use React as part of a firefox addon I'm working on. 我正在尝试将React用作我正在开发的firefox插件的一部分。 React works fine as long as I don't use jsx. 只要我不使用jsx，React就可以正常工作。 Babel isn't working - because I can't specify the type of the script I add. Babel无法正常工作-因为我无法指定所添加脚本的类型。

I'm doing: 我正在做：

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
            ],
        });
   }
);

Ideally I'd be able to set a type property on the './js/main.js' script, but the docs don't appear to have anything. 理想情况下，我可以在'./js/main.js'脚本上设置type属性，但是文档似乎没有任何内容。

Answer 1

The trick is to load react, jquery, babel and your jsx directly in your html, as you usually do. 诀窍是像往常一样直接在HTML中加载react，jquery，babel和jsx。 The javascripts files that you'll have to load using the contentScriptFile param are those one that you need to load the logic to communicate with the addon main js file. 您必须使用contentScriptFile参数加载的javascripts文件是您加载逻辑以与插件主js文件进行通信所需的那些文件。

An example for a valid html will be: 有效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>

If you tell me what you need to do in that html/content script I can give you an example of how you can do to communicate it with the main script. 如果您告诉我在该html / content脚本中需要执行的操作，那么我可以举一个例子说明如何与主脚本进行通信。

Firefox插件SDK：Babel支持

问题描述

1 个解决方案

解决方案1
0 2016-01-07 01:35:50

Firefox插件SDK：Babel支持

问题描述

1 个解决方案

解决方案1 0 2016-01-07 01:35:50

解决方案1
0 2016-01-07 01:35:50