需要在ES6脚本从requirejs模块（带babeljs插件）

我试图使用与ReactJS一起RequireJS babel plugin做一个简单的类ES6，但无法弄清楚如何Import或RequireJS要求反应库，同时还出口类在另一个脚本中使用。需要在ES6脚本从requirejs模块（带babeljs插件）

以下是我迄今为止所做的jsbin，但目前它出现错误，当我到达es6类时，因为导出在require调用中，但是如果我删除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}; 
});

TL;博士：你如何需要时ES6脚本里面从requirejs模块和仍然导出一个类的对象？

来源

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

下面的工作示例中，我必须从接受的答案中更改一件事情，那就是在requirejs config脚本中使用jsx。

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

需要在ES6脚本从requirejs模块（带babeljs插件）

回答

相关问题