在 es6 脚本中从 requirejs（使用 babeljs 插件）获取模块

Question

我正在尝试使用 RequireJS babel plugin along with ReactJS to make a simple class in es6 but cant figure out how to Import or Require Reacts library from RequireJS，同时还导出 class 以在另一个脚本中使用。

下面是我到目前为止所做的 jsbin 但目前当我到达 es6 时出错 class 因为导出在 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;dr：在 es6 脚本中如何从 requirejs 获取模块并仍然导出 class 对象？

Answer 1

首先，回答你的主要问题，可以这样导出：

import React from 'react';

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

export default Welcome

组件的使用（你的 ReactDOM include 有一些问题）：

requirejs.config({
  paths: {
    'es6': "bower_components/requirejs-babel/es6",
    'babel': "babel-5.8.34.min",
    'react': 'https://unpkg.com/react@15.3.2/dist/react',
    'react-dom': 'https://unpkg.com/react-dom@15.3.2/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")
  );

});

Answer 2

下面的工作示例，我必须从接受的答案中更改的一件事是在 requirejs 配置脚本中使用 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

在 es6 脚本中从 requirejs（使用 babeljs 插件）获取模块

Requiring modules from requirejs (with babeljs plugin) in es6 scripts

javascript

requirejs

ecmascript-6

reactjs

babeljs