Firefox插件SDK：Babel支持

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'腳本上設置type屬性，但是文檔似乎沒有任何內容。

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 / 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