mikach / requirejs-babel

An AMD loader plugin for Babel
117 stars 32 forks source link

Exclude import(s) from transformation #12

Closed jim-y closed 9 years ago

jim-y commented 9 years ago

Hi.

I have a legacy RequireJS driven system and I try to introduce React for HTML templating (first). So the general idea was to rewrite my html widgets as React components, in JSX, so I'm using requirejs-babel both to be able to require my widgets and to transpile JSX. This part already works great, but!. Imagine a simple widget which tries to import/require React as a dependency to be able to call React.createClass without the need to add React to the global object. ->

import React from 'react';

export default React.createClass({});

The problem is that with this approach the plugin tries to transpile the whole React lib with babel which leads to an exception of exceeding the maximum size of ~100kB.

This leads to that I can't really import anything but "pure" es6/react components without dependencies.

Example:

A.js

define([
  'jquery',
  'es6!MyShinyUI'
], function($, myShinyUI) {
  // ...
});

So myShinyUI can be written in ES6 and it gets transpiled by the plugin. That's good, but

MyShinyUI.js

import SomeFragment from 'components/SomeFragment';
import React from 'react';
export default React.createClass({});

here, SomeFragment is another ES6/React component so transpiling it is OK, but React is not written in ES^ and I don't want the plugin to try to transpile it :/ How can I overcome this problem? Now I was previously adding react to the global object so I can reference it by window.React.createClass({}) but I have other modules which I don't want to add to the global object.

Any thoughts? Cheers, Jim

jim-y commented 9 years ago

Closing the issue since I found out that my configuration was bad.

I used

//config: {
//  es6: {
//      resolveModuleSource: function(source) {
//          return 'es6!'+source;
//      }
//  }
//},

in main.js even in dev env. My bad :/

Cheers