javascript - 火狐插件 SDK : Babel support

标签 javascript firefox reactjs firefox-addon-sdk babeljs

我正在尝试使用 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' 脚本上设置类型属性,但文档似乎没有任何内容。

最佳答案

诀窍是像平常一样直接在 html 中加载 React、jquery、babel 和 jsx。您必须使用 contentScriptFile 参数加载的 javascript 文件是您需要加载逻辑以与插件主 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/content 脚本中做什么,我可以给您一个示例,说明如何将其与主脚本进行通信。

关于javascript - 火狐插件 SDK : Babel support,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34591765/

相关文章:

javascript - 显示表单提交到 DOM 的值

javascript - 使用 SVG 时,ScrollIntoView 在 Firefox 中出现错误

c++ - 如何导出 Firefox 书签?

javascript - 梅文本字段。更改图标时,无法点击

javascript - 将子组件动态添加到 React 组件

javascript - 当我需要调用者的执行暂停/等待时,如何使用promise.then()?

javascript - 如何使用编辑窗口编辑表格中的行

javascript - 如何将多个函数组合成一个函数?

javascript - 如何使用javascript打开firefox插件?

javascript - 为什么键盘(onKeyDown)事件冒泡在组件上无法访问,但在父级上?