Требуя модули из requirejs (с babeljs плагин) в ES6 сценариев

Я пытаюсь использовать RequireJS babel plugin вместе с ReactJS сделать простой класс в ES6, но не могу понять, как Import или Требовать Реагирует библиотеку из RequireJS, а также экспортировать класс для использования в другом скрипте.Требуя модули из requirejs (с babeljs плагин) в ES6 сценариев

Ниже приведен jsbin того, что я сделал до сих пор, но в настоящее время это ошибки, когда я добираюсь до класса es6, потому что экспорт находится внутри вызова require, но если я удалю требуемый вызов React.Component не существует.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script> 
    <script src="https://output.jsbin.com/guvalasowi.js"></script> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div id="a-div"></div> 
</body> 
</html>

RequireJS Config

require({ 
    paths: { 
    es6: "https://cdn.rawgit.com/mikach/requirejs-babel/master/es6", 
    babel: "https://cdn.rawgit.com/mikach/requirejs-babel/master/babel-5.8.34.min", 
    react: "https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-with-addons.min", 
    reactDOM: "https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min", 
    test: "https://output.jsbin.com/sahudexegu" 
    } 
}); 
require(['es6!test', 'reactDOM'], function(test, ReactDOM){ 
    ReactDOM.render(
    table, 
    document.getElementById("a-div") 
); 
});

Test Module (es6 class)

require(['react'], function(React){ 
    class Welcome extends React.Component { 
     render() { 
     return <h1>Hello</h1>; 
     } 
    }; 

    export {Welcome}; 
});

ТЛ; др: Как вам требуется модули из requirejs, когда внутри ES6 сценариев и до сих пор экспортировать объект класса?

источник

2016-11-18 Snipzwolf

Во-первых, чтобы ответить на ваш главный вопрос, экспорт может сделать так:

import React from 'react'; 

class Welcome extends React.Component { 
    render() { 
     return (
      <h1>Hello</h1> 
     ); 
    } 
} 

export default Welcome

Использование компонента (имел некоторые проблемы с вашим ReactDOM включать, как это было):

requirejs.config({ 
    paths: { 
    'es6': "bower_components/requirejs-babel/es6", 
    'babel': "babel-5.8.34.min", 
    'react': 'https://unpkg.com/[email protected]/dist/react', 
    'react-dom': 'https://unpkg.com/[email protected]/dist/react-dom', 
    'test': "test" 
    } 
}); 


requirejs(['es6!test', 'react', 'react-dom'], function(test, React, ReactDOM) { 

    var Welcome = test.default; 

    ReactDOM.render(
    <Welcome />, 
    document.getElementById("a-div") 
); 

});

источник

2016-11-19 07:36:21

В приведенном ниже примере ниже, одна вещь, которую я должен был изменить из принятого ответа, заключалась в использовании jsx в сценарии конфигурации requirejs.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script> 
    <script src="https://output.jsbin.com/zeyajapoxa.js"></script> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div id="a-div"></div> 
</body> 
</html>

RequireJS Config

require({ 
    paths: { 
    es6: "https://cdn.rawgit.com/mikach/requirejs-babel/master/es6", 
    babel: "https://cdn.rawgit.com/mikach/requirejs-babel/master/babel-5.8.34.min", 
    react: "https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-with-addons", 
    'react-dom': "https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom", 
    test: "https://output.jsbin.com/poremuqupu" 
    } 
}); 
requirejs(['es6!test', 'react', 'react-dom'], function(test, React, ReactDOM) { 
    console.log(arguments) 
    //var Welcome = test.default; 
    console.log(test) 

    ReactDOM.render(
    React.createElement(test, test), 
    document.getElementById("a-div") 
); 
});

Es6 Class

import React from 'react'; 

class Welcome extends React.Component { 
    render() { 
    return <h1>Hello</h1>; 
    } 
}; 

export default Welcome

источник

2016-11-21 11:46:33 Snipzwolf

Требуя модули из requirejs (с babeljs плагин) в ES6 сценариев

ответ

Смежные вопросы