I have an existing app that is all AMD modules based and use require.js on bundling up things. I need to bring a bunch of es2015 react code into this app as AMD modules and use Babel to turn them into AMD modules. Here is my babel config
babel: options: sourceMap: false plugins: [ 'transform-class-properties', 'transform-object-rest-spread', 'transform-es2015-modules-amd'] presets: [ 'react','es2015'] dist: files: [{ expand: true cwd: "src/foo/jsx" src: "**/*.js" dest: "build/foo/js/" ext: ".js" }] The result works and generates the AMD modules as follows for instance for myreact.js module:
define(["exports", "react", "prop-types"], function (exports, _react, _propTypes) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _react2 = _interopRequireDefault(_react); var _propTypes2 = _interopRequireDefault(_propTypes); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var REQUIRED_FIELD_SYMBOL = "*"; function Blah(props) { ... } exports.default = Blah; }); Now, when I use this AMD module in my other AMD modules with define, it is undefined
define([..., 'foo/js/myreact'], function(..., RM) { RM.Blah <---- this is undefied RM.default <---- still undefied The generated code does not return the exports.
Also, I noticed in my require.js generated bundle.js, the react model shows up as follows:
define('foo/js/myreact',["exports", "react", "prop-types"], function (exports, _react, _propTypes){ .. } I am not really defining exports anywhere in my require.js config file so how I am supposed to setup exports?
Basically, how should I use my react AMD modules within other AMD modules?
0 comments:
Post a Comment